如何使用同一個createElement變量多次使用appendChild

Question

我正在嘗試這樣做，以便在最新輸入中鍵入內容時會創建一個新內容，但僅適用於一個

$(document).ready(function() {
    $( function() {
        $("#list").draggable();
    });
    var count = 1;
    var timer = 0;
    var input = document.createElement("input");
    input.type = "text";

    init();
    function init() {
        loop();
    }
    function loop() {

        requestAnimFrame(function() {
            loop();
        });
        update();
        render();

    }

    function update() {
        console.log(count);
        if(document.getElementById(count).value == "") {

        } else {
            count += 1;
        }
        var  = div.cloneNode(true);
        document.getElementById("list").appendChild(input);
    }
    function render() {
        input.id = count;
        input.name = count;
    }
});
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ) {
        window.setTimeout(callback, 1000/60);
    }
})();

那就是javascript。

Answer 1

https://jsfiddle.net/gb2ayz8w/1/

看一看，這可能有助於克隆您的元素。

$(document).ready(function() {

    var count = 1;
    var timer = 0;
    var input = $("<input></input>", {
        'type':'text',
      'class':'form-control',
      'value':'1',
      'id':'count'
    });


    for(var i=1;i!=11;i++) {
        input.val(count++);
        $("#list").append(input.clone());
    }

});

Answer 2

經過一些調整后我得到了答案，

        count += 1;
        var input = document.createElement("input");
        input.id = count;
        input.name = count;
        input.type = "text";
        document.getElementById("list").appendChild(input);

我需要重新聲明它以重新創建它，然后進行設置。

Answer 3

document.getElementById("list").appendChild(input.cloneNode(true));

不需要包括JQuery。