How to call a leaflet Javascript Function in dropdown menu bar?

Question

i have the following problem: my target is a hybrid app with leaflet. I create a dropdown menu with html/CSS/JQuery. Here is the code:

<nav>
<ul>
    <li id="menuPoint1"><image src="../img/Icon/info.png"/>
        <ul class="subMenuPoint1">
            <li class="firstLi"><a href='#'>Interpretation</a></li>
            <li ><a href='#'>Kennblatt</a></li>
            <hr>
            <image src="http://maps.ioer.de/cgi-bin/wms?MAP=S02RG_1000&&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/jpeg&LAYER=S02RG_2012_a"/>
        </ul>
    </li>
    <li id="menuPoint2"><image src="../img/Icon/ebenen.png"/></li>
    <li id="menuPoint3"><image src="../img/Icon/kalender.png"/></li>
    <li id="menuPoint4"><image src="../img/Icon/lupe.png"/>
        <ul class="subMenuPoint4">
            <li id="search"></li>
        </ul>
    </li>
    <li id="menuPoint5"><image src="../img/Icon/helligkeit.png"/></li>
</ul>

Now I like to call the Leaflet Geosearch Plug in from https://github.com/smeijer/L.GeoSearch at the point li id="search"

I know how to call the function within the javascript part, but not within the list element, which is outside the Leaflet function.

The code for the Leaflet Map is:

new L.Control.GeoSearch({
        position: 'topcenter',
        provider: new L.GeoSearch.Provider.OpenStreetMap(),
    }).addTo(map);

which I like to implement in the dropdown menu.

Much thanks for Help !

Answer 1

I found the solution:

var search = document.getElementById('suche');

    search.appendChild(new L.Control.GeoSearch({
                      provider: new L.GeoSearch.Provider.OpenStreetMap(),
                }).onAdd(map));