1

これを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{
        }   
    };
4

1 に答える 1

0

.appendChild()変数にあるようなHTML文字列ではなく、DOM要素を想定していtextareaます。

document.createElement最初に、次のようなものを使用する必要があります。

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

次に、を使用して-elementdocument.createTextNode()内にテキストを作成します。li等々..

于 2013-01-15T09:56:15.817 に答える