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);

但我有一些问题。

我认为我没有将文本归入列表中。这就是我的意思我到目前为止：

 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元素，而不是您textarea变量中的HTML字符串。

您必须首先使用document.createElement，例如：

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

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

在纯javascript中转换jquery

1 个答案: