在纯javascript中转换jquery

Question

如何将jquery库转换为纯javascript？

function appendText(){ 
    var text = $("#text").val(); 

    if ($("#text").val()){ 
    var textArea = "<div class='divex'> <li style='list-style-type:none;' id='t"+counter+"'>"+text+"</li><button id='b"+ 
    counter+"'name='t"+counter+"' >edit</button></div>";  
    $("#text").val(); 
    $("#addedText").after(textArea); 
    $("#t"+counter).clear;  
    $("#t"+counter).attr('readonly','readonly'); 
    $("#b"+counter).bind('click',makeAreaEditable); 
    $("#text").val(''); 
    $('.divex').sortable();             
    counter++; 
    } 
    else{ 
    } 
}; 

的开始我想是这样的：

var counter=0; 
function appendText(){ 
    var text = document.getElementById('text'); 

    if (document.getElementById('text').value){ 
    var textArea = "<div class='divex'> <li style='list-style-type:none;'id='t"+counter+"'>"+text+"</li><button id='b"+ 
    counter+"'name='t"+counter+"' >edit</button> </div>"; 

    var texty = document.getElementById('addedText').appendChild(textArea); 

，但我有一些问题。

我觉得我没atribue文本列表corectly ..这里是 我到目前为止有：

var counter=0; 
    function appendText(){ 

     var text = document.getElementById('text').value; 

     if (document.getElementById('text').value){ 
     var div = document.createElement('div'); 
     div.class = 'divex'; 
     var li = document.createElement('li'); 

     div.appendChild(li); 
     document.createTextNode(text); 

     var bigdiv = document.getElementById('addedText'); 
     bigdiv.appendChild(text); 

     counter++; 
     } 
     else{ 
     } 
    }; 

Answer 1

.appendChild()需要一个DOM元素，而不是HTML字符串就像你在textarea变量中一样。

你必须使用document.createElement第一，是这样的：

var div = document.createElement('div'); 
div.class = 'divex'; 
var li = document.createElement('li'); 
div.appendChild(li); 
// etc. 

然后使用document.createTextNode()创建li - 元素中的文本。等等..