DOM appendChild не работает для двух переменных

У меня есть следующий код для записи списка элементов в js click function для двух div (myList, myList1).DOM appendChild не работает для двух переменных

Я добавление Li ребенка для обоих, но только второй ДИВ обновляется, но первым ДИВ не обновляется,

\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>

Он производит следующий вывод,

myList: 
    ------- 
Coffee 
Tea 

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

Фактический результат, который мы ищем, следующий:

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

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

Мне что-то не хватает, может кто-то подскажите, что это такое.

Заранее спасибо.

источник

2016-12-22 Ratwanska

* Если узел является существующий узел в DOM, он будет удален из старого и помещен в новое положение * - js doc –

просто дайте вам четкое представление о том, что происходит на самом деле, что происходит https://jsfiddle.net/5zmsxem0/2/ –

Это потому, что appendchild перемещает узел от первой до второй ul.

эта линия

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

добавить узел уль MyList но очень следующая строка

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

перемещает узел из MyList в myList1

Вы можете клонировать ваш узел, чтобы получить желаемое значение л.

<!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. Вам нужно клонировать:

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

источник

2016-12-22 07:49:40

Как ваш вопрос имеет тег JQuery, вы должны попробовать это:

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 не работает для двух переменных

ответ

Смежные вопросы