JSFiddle - React, Tailwind, and code Playground

by marsone

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<ul id="menu">
    <li id="first_li" class="ui-state-disabled"><a href="#">Aberdeen</a>
    </li>
    <li id="second_li"><a href="#">Ada</a>
    </li>
    <li><a href="#">Adamsville</a>
    </li>
    <li><a href="#">Addyston</a>
    </li>
    <li> <a href="#">Delphi</a>
        <ul>
            <li><a href="#">Ada</a>
            </li>
            <li><a href="#">Saarland</a>
            </li>
            <li><a href="#">Salzburg</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Saarland</a>
    </li>
    <li> <a href="#">Salzburg</a>
        <ul>
            <li><a href="#">Perch</a>
            </li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Amesville</a>
    </li>
</ul>

CSS

.ui-menu {
    width: 150px;
}

JavaScript

$(function () {     
     var newLi = document.createElement('li');
     var newLink = document.createElement('a');
     newLink.appendChild(document.createTextNode('Abracadabra'));
     newLink.setAttribute('href', '#');
     newLi.appendChild(newLink);
     console.log(newLink);
     console.log(newLi);   

     // add the newly created li and its content into the Menu
     my_li = document.getElementById("second_li");
     menu=document.getElementById("menu");
     menu.insertBefore(newLi, my_li);
     $("#menu").menu();
 });