JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<script src="http://jquery.bassistance.de/treeview/jquery.treeview.js" type="text/javascript"></script>


<script type="text/javascript">
function toggltheme(what) {
$("#"+what).children().toggle();
};
function update(){
    $("#tree").treeview()
}
children = 0
    
    function changetoinput(what){
    

    }
    
function addchild(where){
var Parent = document.getElementById("tree");
var NewLI = document.createElement("UL");
var before = document.getElementById(where);

    NewLI.innerHTML = "<div onclick=\"toggltheme('"+children+"');\">></div><li id="+children+">this is a test #"+children+" <input type=\"button\" onclick=\"return addchild('"+children+"');\" value=\"+\"></li>";
    
before.appendChild(NewLI)
children++

}
    
 function changetoinput(where,text){

var NewLI = document.createElement("input");
NewLI.value= text
NewLI.class= "tempinput"
where.appendChild(NewLI)

}
    
</script>
</head>

<body><input type="button" onclick="return addchild('tree');" value="+"></li>
<ul id="tree">
</ul>
    <script>addchild('tree')
addchild('tree') 
   
  </script>
    <ul>
        <li class="thetext" />Ать-Ать-Ать</li>
            <li class="thetext" />Ать-Ать-Ать234234</li>
    </ul>

JavaScript

$(document).ready(function() {
    editing=false
$('.thetext').click(
   
function() { $(this).focus()
    if(!editing){
    oldtext=this.innerHTML    
    this.innerHTML = "<input id=\"theeditingfield\" class=\"tempinput\" type=\"text\" value=\""+oldtext+"\"><input id=\"ok\" type=\"button\">"
    editing = true
            $("#ok").click(
        function(){
        newtext =  this.innerHTML
        this.innerHTML = newtext
});

  } 
   else {
    //oldtext=document.getElementById("theeditingfield");
    //this.innerHTML=oldtext.value
    //editing = false
    
   }
   
});
    

});