Мы знаем, что AppendChild и InsertBefore имеют функцию вставки узлов. Но в применении между ними все же есть некоторые различия.
Например, когда мы хотим вставить дочерний узел P в следующий div:
<div id="test"><p id="x1">Узел</p><p>Узел</p></div>
Мы можем написать так (пожалуйста, добавьте еще один комментарий при тестировании определенной ситуации):
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
var oTest = document.getElementById("тест");
var newNode = document.createElement("p");
newNode.innerHTML = "Это тест";
//Тестирование начинается здесь
// метод добавления дочернего элемента:
oTest.appendChild(newNode);
//Метод вставкиBefore:
oTest.insertBefore(newNode,null);
</скрипт>
С помощью приведенного выше кода вы можете проверить, что под узлом div создается новый узел, и этот узел является последним узлом div. (Чтобы просмотреть DOM, IE может просмотреть его через подключаемый модуль панели инструментов разработчика IE, а Firefox может использовать Firebug)
Очевидно, что из этого примера мы можем узнать, что и AppendChildhild, и InsertBefore могут вставлять узлы.
В приведенном выше примере есть такой код: oTest.insertBefore(newNode,null). Здесь у метода InsertBefore есть два параметра, которые можно установить. Первый из них аналогичен AppendChild, но второй уникален. Оно может быть не только нулевым, но также может быть:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
var oTest = document.getElementById("тест");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "Это тест";
oTest.insertBefore(newNode,refChild);
</скрипт>
В этом примере будет вставлен новый узел перед узлом x1.
Или:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
var oTest = document.getElementById("тест");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "Это тест";
oTest.insertBefore(newNode,refChild.nextSibling);
</скрипт>
В этом примере новый узел будет вставлен перед следующим узлом узла x1.
Также доступно для:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
var oTest = document.getElementById("тест");
var newNode = document.createElement("p");
newNode.innerHTML = "Это тест";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</скрипт>
В этом примере новый узел будет вставлен перед первым дочерним узлом. Вы также можете вставить новые узлы в другие места, изменив childNodes[0,1,...].
Поскольку видно, что метод InsertBefore() предназначен для вставки нового узла перед существующим дочерним узлом, но в примере 1 метод InsertBefore() также может использоваться для вставки нового узла в конец дочернего узла. список узлов. Объединив эти две ситуации, выяснилось, что метод InsertBefore() может вставить узел в любую позицию в списке дочерних узлов.
Из этих примеров:
Метод AppendChild() добавляет новый дочерний узел в конец списка дочерних узлов узла.
Метод InsertBefore() вставляет новый узел в любую позицию в списке дочерних узлов узла.