Справочник по JavaScript: Алфавитный указатель методов: Методы JavaScript на букву I. JavaScript - DOM: добавление и удаление узлов Javascript insertbefore примеры

Метод Node.insertBefore() добавляет элемент в список дочерних элементов родителя перед указанным элементом.

Синтаксис var insertedElement = parentElement .insertBefore(newElement , referenceElement );

В Mozilla Firefox, если referenceElement не задан или равен null , newElement вcтавляется в конец списка дочерних элеметнов. В IE, referenceElement равный undefined , сгенерируется исключение " Invalid argument", в то время как Chrome сгенерирует исключение "Uncaught TypeError", ожидая 2 аргумента.

• insertedElement Вставленный элемент.
• parentElement Родитель для нового элемента.
• newElement Элемент для вставки.
• referenceElement Элемент, перед которым будет вставлен newElement .

Пример foo bar // Создаем новый var sp1 = document.createElement("span"); // Получаем ссылку на элемент, перед которым мы хотим вставить sp1 var sp2 = document.getElementById("childElement"); //Получаем ссылку на родителя sp2 var parentDiv = sp2.parentNode; // Вставляем sp1 перед sp2 parentDiv.insertBefore(sp1, sp2);

Однако нет метода insertAfter . Он может быть заменен использованием метода insertBefore в связке с nextSibling .

В предыдущем примере sp1 может быть вставлен после sp2 следующим образом:

ParentDiv.insertBefore(sp1, sp2.nextSibling);

Если sp2 не имеет следующего элемента, то он будет последним дочерним элементом, sp2.nextSibling вернет null , а sp1 вставится в конец дочернего узла (сразу после sp2 ).

Пример 2

Вставка элемента перед первым дочерним элементом с помощью firstChild .

// Получаем ссылку на элемент в который мы хотим добавить новый элемент var parentElement = document.getElementById("parentElement"); // Получаем ссылку на первый дочерний элемент var theFirstChild = parentElement.firstChild; // Создаем новый элемент, который будем добавлять var newElement = document.createElement("div"); // Вставляем новый элемент перед первым дочерним элементом parentElement.insertBefore(newElement, theFirstChild);

Когда у родителя нет первого дочернего элемента, firstChild вернет null . Новый элемент все равно будет втавляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемета, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.

Совместимость с браузерами Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)

Базовая поддержка	1.0	(Да)	(Да)	(Да)	(Да)

На этом уроке мы научимся создавать узлы-элементы (createElement) и текстовые узлы (createTextNode). А также рассмотрим методы, предназначенные для добавления узлов к дереву (appendChild , insertBefore) и для удаления узлов из дерева (removeChild).

Добавление узлов к дереву

Добавление нового узла к дереву обычно осуществляется в 2 этапа:

Создать необходимый узел, используя один из следующих методов:

• createElement() - создаёт элемент (узел) с указанным именем (тегом). Метод createElement(element) имеет один обязательный параметр (element) - это строка, содержащая имя создаваемого элемент (тега). Указывать имя элемента (тега) в параметре необходимо заглавными буквами. В качестве результата данный метод возвращает элемент, который был создан.
• createTextNode() - создаёт текстовый узел с указанным текстом. Метод createTextNode(text) имеет один обязательный параметр (text) - это строка, содержащая текст текстового узла. В качестве результата данный метод возвращает текстовый узел, который был создан.

Указать место в дереве, куда необходимо вставить узел. Для этого необходимо воспользоваться одним из следующих методов:

• appendChild() - добавляет узел как последний дочерний узел элемента, для которого вызывается данный метод. Метод appendChild(node) имеет один обязательный параметр это узел (node), который Вы хотите добавить. В качестве результата данный метод возвращает добавленный узел.
• insertBefore() - вставляет узел как дочерний узел элемента, для которого вызывается данный метод. Метод insertBefore(newNode,existingNode) имеет два параметра: newNode (обязательный) - узел, который Вы хотите добавить, existingNode (не обязательный) - это дочерний узел элемента перед которым, необходимо вставить узел. Если второй параметр (existingNode) не указать, то данный метод вставит его в конец, т.е. в качестве последнего дочернего узла элемента для которого вызывается данный метод. В качестве результата метод insertBefore() возвращает вставленный узел.

Например:

• Компьютер
• Ноутбук
• Планшет

Рассмотрим более сложный пример, в котором добавим к дереву узел LI , содержащий текстовый узел с текстом "Смартфон", в конец списка ul .

Для этого необходимо выполнить следующее:

Создать элемент (узел) LI .

Создать текстовый узел, содержащий текст "Смартфон".

Добавить созданный текстовый узел как последний дочерний узел только что созданному элементу LI

Добавить недавно созданный узел LI как последний дочерний узел элемента ul

//создаём элемент (узел) li var elementLI = document.createElement("li"); //создаём текстовый узел, содержащий текст "Смартфон" var textSmart= document.createTextNode("Cмapтфoн"); //добавляем созданный текстовый узел как последний дочерний элемент к только что созданному элементу LI elementLI.appendChild(textSmart); //получаем элемент, к которому будет добавлен созданный узел li как дочерний var elementUL = document.getElementById("list"); //добавляем созданный элемент li как последний дочерний элемент к UL с id="list" elementUL.appendChild(elementLI);

Методы appendChild() и insertBefore() при работе с существующими узлами

Работа с существующими узлами методами appendChild() и insertBefore() также осуществляется в 2 этапа:

Получить существующий узел в дереве.

Указать место, куда необходимо вставить узел, с помощью метода appendChild() или insertBefore() . При этом узел будет удалён из предыдущего места.

Например, добавить существующий элемент li , содержащий текст “Планшет" в начало списка (при этом он будет удалён из предыдущего места):

//получаем элемент UL, содержащий список, по его id var elementUL = document.getElementById("list"); //получить элемент li, содержащий текстовый узел "Планшет" var elementLI = elementUL.childNodes; //добавляем элемент в начало списка //при этом он будет удалён из исходного места elementUL.insertBefore(elementLI,elementUL.firstChild);

Задание

• Имеется два списка в документе. Необходимо переместить элементы из второго списка в первый.
• Создать список, текстовое поле и 2 кнопки. Написать код на языке JavaScript, который в зависимости от нажатой кнопки добавляет текст, находящийся в текстовом поле, в начало или в конец списка.

Удаление узлов

Удаление узла из дерева осуществляется в 2 этапа:

Получить (найти) этот узел в дереве. Это действие обычно осуществляется одним из следующих методов: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() или querySelectorAll() .

Вызвать у родительского узла метод removeChild() , которому в качестве параметра необходимо передать узел, который мы хотим у него удалить.
Метод removeChild() возвращает в качестве значения удалённый узел или null , если узел, который мы хотели удалить, не существовал.

//найти узел, который мы хотим удалить var findElement = document.getElementById("notebook"); //вызвать у родительского узла метод removeChild //и передать ему в качестве параметра найденный узел findElement.parentNode.removeChild(findElement);

Например, удалить последний дочерний элемент у элемента, имеющего id="myID" :

//получить элемент, имеющий id="myID" var myID = document.getElementById("myID"); //получить последний дочерний узел у элемента myID var lastNode = myID.lastChild; //т.к. мы не знаем, является ли последний дочерний узел элемента элементом, //то воспользуемся циклом while для поиска последнего дочернего элемента у элемента myID //пока у элемента есть узел и его тип не равен 1 (т.е. он не элемент) выполнять while(lastNode && lastNode.nodeType!=1) { //перейти к предыдущему узлу lastNode = lastNode.previousSibling; } //если у узла myID мы нашли элемент if (lastNode) { //то его необходимо удалить lastNode.parentNode.removeChild(lastNode); }

Например, удалить все дочерние узлы у элемента, имеющего id="myQuestion" :

//получить элемент, у которого мы хотим удалить все его дочерние узлы var elementQuestion = document.getElementById("myQuestion"); //пока есть первый элемент while (elementQuestion.firstElement) { //удалить его elementQuestion.removeChild(element.firstChild); }

Задание

Напишите функцию, удаляющую все текстовые узлы у элемента.

Имеется 2 списка (), напишите код на языке JavaScript, удаляющий все элементы из 1 и 2 списка.

Метод позволяет импортировать или экспортировать "избранные" закладки.

External.ImportExportFavorites(true|false, "{Путь}");

Первый параметр задает операцию: импорт (значение true ) или экспорт (значение false ).

Второй параметр задает путь, откуда будут импортироваться или куда будут экспортироваться закладки. В случае, если задать пустую строку, Web-обозреватель выдаст стандартное диалоговое окно с выбором папки.

Метод не возвращает значения.

inRange

Метод позволяет узнать, находится ли внутри объекта заданный объект TextRange.

{Объект TextRange}.inRange({Сравниваемый объект TextRange});

Метод возвращает true TextRange содержится внутри текущего объекта или равен ему, и false - в противном случае.

TextRange .

Поддерживается NN начиная с 4.0

insertAdjacentElement

Метод вставляет вновь созданный элемент страницы внутрь текущего элемента или рядом с ним.

{Объект}.insertAdjacentElement("beforeBegin|afterBegin|beforeEnd|afterEnd", {Вставляемый элемент страницы});

Метод принимает два параметра.

Первый параметр задает место, куда будет вставлен элемент страницы. Для этого параметра доступно четыре параметра:

• beforeBegin - элемент будет вставлен перед открывающим тегом текущего элемента страницы;

insertAdjacentHTML

Метод вставляет кусок HTML-кода внутри или рядом с определенным тегом.

{Объект}.insertAdjacentHTML("beforeBegin|afterBegin|beforeEnd|afterEnd", {Вставляемый HTML-код});

Метод принимает два параметра.

Первый параметр задает место, куда будет вставлен HTML-код. Для этого параметра доступно четыре параметра:

• beforeBegin - код будет вставлен перед открывающим тегом текущего элемента страницы;
• afterBegin - будет вставлен после открывающего тега текущего элемента страницы;
• beforeEnd - будет вставлен перед закрывающим тегом текущего элемента страницы (но после всего содержимого тега);
• afterEnd - будет вставлен после закрывающего тега текущего элемента страницы.

Второй параметр задает HTML-код, который мы хотим вставить.

insertAdjacentText

Метод вставляет текст внутри или рядом с определенным элементом страницы.

{Объект}.insertAdjacentText("beforeBegin|afterBegin|beforeEnd|afterEnd", {Вставляемый текст});

Метод принимает два параметра.

Первый параметр задает место, куда будет вставлен текст. Для этого параметра доступно четыре параметра:

• beforeBegin - текст будет вставлен перед открывающим тегом текущего элемента страницы;
• afterBegin - будет вставлен после открывающего тега текущего элемента страницы;
• beforeEnd - будет вставлен перед закрывающим тегом текущего элемента страницы (но после всего содержимого тега);
• afterEnd - будет вставлен после закрывающего тега текущего элемента страницы.

Второй параметр задает текст, который мы хотим вставить.

Этот метод не возвращает значения.

Поддерживается IE начиная с 4.0

insertBefore

Метод вставляет элемент в страницу.

{Объект}.insertBefore({Элемент страницы, который мы хотим вставить}[, "{Дочерний элемент}"]);

Метод принимает два параметра.

Поддерживается IE начиная с 5.0

insertCell

Метод вставляет ячейку в строку таблицы.

{Объект строки таблицы}.insertСell([{Индекс}]);

Метод принимает всего один необязательный параметр, который задает индекс только что вставленной ячейки в коллекции cells .

В случае, если параметр не указан, ячейка добавляется в конец коллекции (значение -1 ).

Поддерживается IE начиная с 4.0

insertRow

Метод вставляет ячейку в таблицу или одну из столбцов.

{Объект строки таблицы}.insertRow([{Индекс}]);

Метод принимает всего один необязательный параметр, который задает индекс только что вставленной строки в коллекции rows .

В случае, если параметр не указан, строка добавляется в конец коллекции (значение -1 ).

Поддерживается IE начиная с 4.0

isEqual

Метод позволяет сравнить некоторый объект TextRange с текущим объектом.

{Объект TextRange}.isEqual({Сравниваемый объект TextRange});

Метод принимает всего один параметр, который задает ссылку на сравниваемый объект TextRange .

Метод возвращает true , если переданный в параметре объект TextRange равен текущему объекту.

Поддерживается IE начиная с 4.0

IsSubscribed

Метод позволяет узнать, подписан ли клиент на определенный канал, или нет.

External.IsSubscribed("{Интернет-адрес CDF-файла}");

Метод принимает всего один параметр, который задает интернет-адрес CDF-файла, который описывает канал.

Метод возвращает true , если клиент подписан на данный канал, и false - в противном случае.

Поддерживается IE начиная с 4.0

item

Метод возвращает элемент коллекции под заданным номером.

{Коллекция}.item({Индекс}[, {Вторичный индекс}]);

Метод принимает два параметра.

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

Если индекс задан как число, то возвращается элемент под данным номером.

Если индекс задан как строковое значение, то возвращается элемент, у которого значение атрибутов ID и NAME совпадают с этим строковым значением.

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

Если подходящий элемент коллекции не найден, метод возвращает null .

Числовые индексы поддерживаются для коллекций: bookmarks , children , pages , childNodes , controlRange , rules .

Вторичные индексы недоступны для коллекций: attributes , behaviorUrns , filters , frames , imports , namespaces , styleSheets , TextRange , TextRectangle .

Поддерживается IE начиная с 4.0