Убивает ли .appendChild () отношения родитель-потомок между дочерним элементом и его текущим родителем? - PullRequest
Новая
       0

Убивает ли .appendChild () отношения родитель-потомок между дочерним элементом и его текущим родителем?

3 голосов
/ 24 марта 2012

Когда я делаю что-то вроде divNode.appendChild(pNode), pNode перемещается внутрь divNode.Похоже, что его родитель меняется с того, что было до divNode.Это ожидаемое поведение?

Вот мой код: http://jsfiddle.net/YqG96/

<html>
<head>
<style>
p {
    background: orange;
}
div {
    background: lightcyan;
    padding: 5px;
}
</style>
<script>
window.onload = function() {
    pNode = document.getElementById('pNode');
    divNode = document.getElementById('divNode');
    divNode.appendChild(pNode);
}
</script>
</head>
<body>
<p id="pNode">Foo</p>
<div id="divNode">Bar</div>
</body>
</html>

Можно ли изменить его так, чтобы pNode оставался под телом, а также divNode?Если два родителя для узла не имеют смысла, то возможно ли создать новую копию pNode и добавить эту новую копию к divNode?

1 Ответ

5 голосов
/ 24 марта 2012

Это ожидаемое поведение.Когда вы делаете appendChild() на узле, который уже находится в DOM, узел перемещается из того места, где он в данный момент находится в DOM, в указанное вами новое местоположение.Это изменит его родителя, а также следующий и предыдущий узлы.

Узел может иметь только одного прямого родителя, поэтому невозможно иметь двух родителей, так как каждый родитель обозначает местоположение для узла и, в отличие оттайны физики элементарных частиц, узел может быть только одно место за один раз.Если вам нужны два узла в двух местах, вы можете либо создать новый узел и добавить его, либо вы можете клонировать существующий узел и добавить этот.

См. cloneNode() функция для получения информации о том, как сделать копию узла и вставить копию в это второе местоположение. 

<script>
window.onload = function() {
    pNode = document.getElementById('pNode').cloneNode(true);
    pNode.id = "pNode2";
    divNode = document.getElementById('divNode');
    divNode.appendChild(pNode);
}
</script>

Помните, что при клонировании узлов любые узлы в клонированном дереве, имеющие идентификатор, будут нуждаться в новомID, чтобы значения идентификатора оставались уникальными в документе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...