DOM appendChildは2つの変数に対しては機能しません

2つのdiv（myList、myList1）に対して、js click関数でリスト要素を書き込むためのコードがあります。DOM appendChildは2つの変数に対しては機能しません

\t function myFunction() { 
 
\t var node = document.createElement("LI"); 
 
\t var textnode = document.createTextNode("Water"); 
 
\t node.appendChild(textnode); 
 
\t document.getElementById("myList").appendChild(node); 
 
\t document.getElementById("myList1").appendChild(node); 
 
\t }

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
    <ul id="myList"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    </ul> 
 

 
    <ul id="myList1"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    </ul> 
 

 
    <button onclick="myFunction()">Try it</button> 
 

 
</body> 
 

 
</html>

それは次の出力が生成され、私は両方のためのli子を追加していますが、唯一の二divが更新されますが、最初のdivが更新されない

myList: 
    ------- 
Coffee 
Tea 

myList1: 
    ------- 
Coffee 
Tea 
Water

実際の出力は以下の通りです。

myList: 
    ------- 
Coffee 
Tea 
Water 

myList1: 
    ------- 
Coffee 
Tea 
Water

私はここに何かが見つからない、誰かがそれが何であるか提案することができます。

ありがとうございます。

出典

2016-12-22 Ratwanska

*ノードは、DOM内の既存のノードである場合、それは古いから削除され、新しい位置に置く* - jsのドキュメント –

ちょうどあなたが実際に何が起こるのかを知る明確なアイデアを与えるhttps://jsfiddle.net/5zmsxem0/2/ –

これは、appendchildがノードを最初のulから2番目のulに移動させるためです。

このライン

document.getElementById("myList").appendChild(node);

ます。myListをULにノードを追加するが、非常に次の行

document.getElementById("myList1").appendChild(node);

は、あなたができるはmyListからmyList1

にノードを移動しますあなたのノードを複製して希望のresuを得るlt。

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<ul id="myList"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<ul id="myList1"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
function myFunction() { 
 
    var node = document.createElement("LI"); 
 
    var textnode = document.createTextNode("Water"); 
 
    node.appendChild(textnode); 
 
    var newNode = node.cloneNode(true); 
 
    document.getElementById("myList").appendChild(node); 
 
    document.getElementById("myList1").appendChild(newNode); 
 
} 
 
</script> 
 
</body> 
 
</html>

出典

2016-12-22 07:48:32 Deep

あなたは、複数のelemsにノードを追加傾けます。あなたはそれのクローンを作成する必要があります：あなたの質問は、jQueryのタグを持っている

var elem=document.createElement("Li"); 
//add text 
elem2=elm.cloneNode(true); 
//append to dom

出典

2016-12-22 07:49:40

として、あなたはこれを試してみてください：

function myFunction() { 
 
    node = $('<li/>').html("water") 
 
    $('ul').append(node) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul id="myList"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<ul id="myList1"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<button onclick="myFunction()">Try it</button>

出典

2016-12-22 07:57:52 SLePort

DOM appendChildは2つの変数に対しては機能しません

答えて

関連する問題