JSFiddle - React, Tailwind, and code Playground

by edgarinvillegas

CSS

/*This doesn't matters for the question*/
.Disc
{
    list-style-type:circle;
	list-style-type:disc;
	list-style-position:outside;
}

#clk
{
    color:blue;
    background:red;
    width:60px;
    height:20px;
}

JavaScript

//Document Ready function
$(document).ready (function (){createAll();});

//Function that creates a Div for click, and some Unordered List elements
function createAll()
{
    var clk=document.createElement("div");
    clk.id="clk";
    clk.onclick=function(){Disreappear();};
    clk.innerHTML = "ClickMe!";
    $(document.body).append(clk);
    
    var Father=document.createElement("div");
    $(document.body).append(Father);
    
    var MainList=document.createElement("li");
    MainList.id="idMainList";
    MainList.innerHTML="<a href='#home' style='text-decoration:none;'>MainList</a>";
    Father.appendChild(MainList);
    
    //Now another nested one:
    var NewNested=document.createElement("ul");
    Father.appendChild(NewNested);
    
        //And now, Nested Lis
        var NN1=document.createElement("li");
        NN1.id="idNN1";
        NN1.className="Disc";
        NN1.innerHTML="<a href='http:www.google.com' style='text-decoration:none;'>GoogleCom</a>";
        NewNested.appendChild(NN1);
    
        var NN2=document.createElement("li");
        NN2.id="idNN2";
        NN2.className="Disc";
        NN2.innerHTML="<a href='http:www.google.es' style='text-decoration:none;'>GoogleEs</a>";
        NewNested.appendChild(NN2);
    
        var NN3=document.createElement("li");
        NN3.id="idNN3";
        NN3.className="Disc";
        NN3.innerHTML="<a href='http:www.google.it' style='text-decoration:none;'>GoogleIt</a>";
        NewNested.appendChild(NN3);
    
        var NN4=document.createElement("li");
        NN4.id="idNN4";
        NN4.className="Disc";
        NN4.innerHTML="<a href='http:www.google.de' style='text-decoration:none;'>GoogleDe</a>";
        NewNested.appendChild(NN4);

        var NN5=document.createElement("li");
        NN5.id="idNN5";
        NN5.className="Disc";
        NN5.innerHTML="<a href='http:www.google.fr' style='text-decoration:none;'>GoogleFr</a>";
        NewNested.appendChild(NN5);
}

//Function that dispatches...