javascriptで複数のLiをUlに追加する

Question

onclickイベントでは、複数のLIをULに追加しようとしていますが、どれくらい多くのappendChildを追加しても、このメソッドで複数のLiを追加する必要はありません。あなたが一度ulを作成し、すべてのクリックでform

に追加し、その後、それにid = "formList"を割り当て、新しいli要素

あなたドン」を作成する必要が

var form = document.getElementById("form"); 
var newUl = document.createElement('ul'); 
var newLi = document.createElement('li'); 

newButton.addEventListener("click", function(){ 
form.appendChild(newUl); 
newUl.id = "formList"; 
var formList = document.getElementById("formList"); 
formList.appendChild(newLi); 
formList.appendChild(newLi); 
formList.appendChild(newLi); 
} 

//// html 
<div id="form"> 

</div> 

Answer 1

を見つけることができます。

これを試してみてください：ムハンマドとは異なり

var form = document.getElementById("form"); 

function newLi() { 
    return document.createElement("li"); 
    } 

newButton.addEventListener("click", function(){ 
    //Create a separate <ul> each time, give it a class, and add it. 
    var newUl = document.createElement("ul"); 
    newUl.class = "formList"; 
    form.appendChild(newUl); 

    //create new <li>'s and append them 
    formList.appendChild(newLi()); 
    formList.appendChild(newLi()); 
    formList.appendChild(newLi()); 

    //smile. :D 
    } 

を、私はあなたが別の順不同リスト（<ul>）ごとに作成することを前提としています。

したがって、ボタンをクリックするたびに、新しい<ul>を追加して、新しい<ul>に<li>を追加します。

Answer 2

var form = document.getElementById("form"); 
var newUl = document.createElement('ul'); 

newUl.id = "formList"; 
form.appendChild(newUl); 

newButton.addEventListener("click", function(){ 
    var newLi = document.createElement('li'); 
    newUl.appendChild(newLi); 
}) 

• ulを再度選択する必要があります。これは、すでに参照があるためです。ここで

あなたはあなたが別の要素を毎回行う必要があり作業フィドルhttps://jsfiddle.net/LeoAref/m5d0bzeL/

Answer 3

newLiは、formListに追加するノードへの参照です。それは一度だけ存在することができます。

最初にformList.appendChild（newLi）を実行すると、それがformListに追加されます。 2回目に実行すると、最初の位置から削除され、2番目の位置に追加されます。 3位にも同じです。

appenChildを使用して同じノードを複数回追加することはできません。

Node.appendChild（）メソッドは、指定された親ノードの子のリストの最後にノードを追加します。指定された子がドキュメント内の既存のノードへの参照である場合、appendChild（）は現在の位置から新しい位置に移動します（他のノードにノードを追加する前に親ノードからノードを削除する必要はありません）。これは、ノードが文書の2つの点に同時に存在することができないことを意味する。したがって、ノードにすでに親がある場合、ノードは最初に削除され、新しい位置に追加されます。

Description at MDN

Answer 4

一斉に自分の投稿に修正しても過言ではあります。あなたのLIをテンプレートにしようとしている場合しかし、あなたはあなたが同じインスタンスを追加しようとしているcloneNode

var template_ul = document.createElement('ul'); 
 
var template_li = document.createElement('li'); 
 
let newButton = document.getElementById('new'); 
 
var count = 0; 
 

 
newButton.addEventListener("click", function() { 
 
    let list = template_ul.cloneNode(); 
 
    document.getElementById('form').appendChild(list); 
 

 
    
 
    let first_li = template_li.cloneNode(); 
 
    var text = document.createTextNode(++count); 
 
    first_li.appendChild(text); 
 
    
 
    list.appendChild(first_li); 
 
    list.appendChild(template_li.cloneNode()); 
 
    list.appendChild(template_li.cloneNode()); 
 
});

body { 
 
    text-align:center; 
 
} 
 
button { margin: 4px auto 1em; } 
 

 
ul { 
 
    margin: 0 auto 1em; 
 
    padding: 0; 
 
    width: 50% 
 
} 
 

 
ul:nth-child(2n) li{ 
 
    background:#c90; 
 
} 
 

 

 
li { 
 
    list-style-type: none; 
 
    background: #09c; 
 
    height: 20px; 
 
    padding: 2px; 
 
} 
 

 
ul, 
 
li { 
 
    border: 1px solid #444; 
 
}

<button id="new">New</button> 
 
<div id="form"> 
 
</div>