Создание, добавление и удаление элементов веб-станицы. Удалить - Как вставить элемент после другого элемента в JavaScript без использования библиотеки? Вставить тег script на страницу javascript dom

На этом уроке мы научимся создавать узлы-элементы (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 списка.

    • Это четвертая часть постов, посвященная нативным эквивалентам jQuery методов. Вы можете почитать , и прежде чем продолжить.

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

    Манипуляции с HTML кодом элементов jQuery // get var html = $(elem).html(); // set $(elem).html("New html"); Нативный JS // get var html = elem.innerHTML; // set elem.innerHTML = "New html"; Манипуляции с текстом элементов jQuery // get var text = $(elem).text(); // set $(elem).text("New text"); Нативный JS // get var text = elem.textContent; // set elem.textContent = "New text"; Создание элемента jQuery $(""); Нативный JS document.createElement("div"); Добавляет содержимое в конец элементов jQuery $(parentNode).append(newNode); Нативный JS parentNode.appendChild(newNode); Добавляет содержимое в начало элементов jQuery $(referenceNode).prepend(newNode); Нативный JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // or referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Вставить непосредственно перед элементом Insert directly before an Element jQuery $(referenceNode).before(newNode); Нативный JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // or referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Вставить непосредственно после элемента Insert directly after an Element jQuery $(referenceNode).after(newNode); Нативный JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // or referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

    Примечание: ‘beforebegin’ и ‘afterend’ будут работать только тогда, когда referenceNode находиться в DOM дереве и имеет родительский элемент.

    Посмотрите на следующее:

    ReferenceNode.insertAdjacentElement(position, node);

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

    • position — позиция относительно referenceNode , должна быть одной из следующих:
      • ‘beforebegin’ — Перед самим элементом.
      • ‘afterbegin’ — Внутри элемента, перед первым потомком.
      • ‘beforeend’ — Внутри элемента, после последнего потомка.
      • ‘afterend’ — После самого элемента.
    • node — узел для вставки
    Text Content

    Some Text Some Text var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("beforeend", elem2); // result Some TextSome Text

    Метод insertAdjacentElement более понятный и интуитивный чем insertBefore метод, но последний лучше поддерживается в старых браузерах.

    Многократное добавление элементов

    Стоит так же отметить, что добавление элемента к узлу, который находиться в DOM дереве приведет к перерисовке. Это не очень хорошо, потому что браузер должен пересчитать размеры и положение нового элемента, что так же приведет к изменениям потомков элемента, предков и элементов, которые появятся после него в DOM. Если вы добавляете много элементов в DOM, то это может занять некоторое время.

    Что бы этого избежать, вы можете сделать добавление с DocumentFragment. Фрагмент документа является объектом document который существует только в памяти, поэтому добавление к нему не будет вызывать никаких перекомпоновок.

    Допустим, нам нужно добавить 100 элементов li к ul элементу, который присутствует в DOM дереве:

    // Get the element that will contain our items var ul = document.querySelector("ul"); // make 100 list elements for (var i = 1; i < 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

    В приведенном выше примере li элементы добавляются напрямую к ul элементу, который находиться в DOM дереве, следовательно, приведет к перерисовке на каждой итерации — это 100 изменений!

    Давайте найдем лучший способ.

    // Get the element that will contain our items var ul = document.querySelector("ul"); // create a document fragment to append the list elements to var docFrag = document.createDocumentFragment(); // make 100 list elements for (var i = 1; i < 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

    В этом же примере элементы li добавляются к фрагменту документа в памяти, так что перекомпоновка сработает, когда фрагмент добавится к элементу ul. Этот способ уменьшит количество перерисовок от 100 до 1.

    Удаление элемента jQuery $(referenceNode).remove(); Нативный JS referenceNode.parentNode.removeChild(referenceNode); // or referenceNode.remove(); // FF 23.0+, 23.0+, Edge (No IE support)

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

    Но, для начало начнем с простого. В создании нового элемента мы будим использовать методы объекта DOM, а именно:

    * document.createElement(param) - этот метод, служит не посредственно для создания элемента. В качестве параметра, принимает название создаваемого элемента.Возвращает ссылку на созданный элемент.

    document.createElement(‘div’); // создаст элемент div.

    * document.appendChild(param) – этот метод, служит для добавления элемента в HTML код. В качестве параметра принимает ссылку на созданный элемент;

    var parent = document.getElementsByTagName("BODY"); //получаем ссылку на элемент body

    var elem = document.createElement(‘div’);// создаст элемент div

    parent.appendChild(elem);// добавляет элемент,где parent это ссылка куда будет добавлен наш элемент, в данном случае – это тело body;

    * document.createTextNode() - метод служит для, размещение текста внутри элемента.

    Пример создания элемента.

    function createElem() {

    Var newP = document.createElement("p");

    NewP.className = "elemClass";

    NewP.id = "myPId";

    NewP.style.width = "100px";

    NewP.style.height = "300px";

    NewP.style.background = "#c5c5c5";

    NewP.style.color = "#000";

    Var text = "текст для вставки";

    Var textNode = document.createTextNode(text);

    NewP.appendChild(textNode);

    Parent.appendChild(newP);

    В функции createElem переменная parent является ссылкой на элемент(body), в котором будет размещен новый элемент. Затем создается новый элемент P, к нему добавляется атрибуты id,class,style,а также задаются значение этих атрибутов. Затем создается текстовый узел, с добавлением его в наш новый элемент. После всего этого происходит добавления самого элемента в тело body. Чтобы сделать больного числа новых элементов придется изрядно потрудиться, т.к. возможно, потребуется разместить их в разных местах веб-страницы, т.е. присоединить к разным элементам.

    Пример создания элемента с помощью универсальной функции.

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

    function createElement(name, attrs, style, text,past_id,position,changed) {

    Var parent = document.getElementsByTagName("BODY");

    Var e = document.createElement(name);

    If (attrs) {

    For (key in attrs) {

    If (key == "class") {

    E.className = attrs;

    } else if (key == "id") {

    E.id = attrs;

    } else {

    E.setAttribute(key, attrs);

    If (style) {

    For (key in style) {

    E.style = style;

    If (text) {

    E.appendChild(document.createTextNode(text));

    Parent.appendChild(e);

    If(past_id){

    Var old_elem = document.getElementById(past_id);

    If(position=="before"){

    Parent.insertBefore(e,old_elem)

    }else if(position=="after"){

    InsertAfter(parent,e,old_elem);

    If(changed!="" && changed==true){

    Parent.removeChild(old_elem);

    Параметры:

    Name – название элемента;

    Attrs – атрибуты создаваемого элемента;

    Style – стили создаваемого элемента;

    Text – вставляемый текс;

    Past_id – id элемента, рядом с которым будет располагаться наш элемент;

    Position - может принимать два значения before,after;

    Changed – флаг, который принимает два значения true или false.Если этот параметр установлен в true, то произойдет замена старого элемента на новый;

    В качестве примера, создадим элемент DIV с атрибутами, и заменим старый элемент на ново созданный.

    createElement("div",

    {"class": "myDivCSSClass", "id": "myDivId","align":"center"},

    {"width": "200px", "height": "250px", "background": "#3B9D00", "color": "#fff"},

    "here is my text",

    "test",

    "before",

    Последнее обновление: 1.11.2015

    Для создания элементов объект document имеет следующие методы:

      createElement(elementName) : создает элемент html, тег которого передается в качестве параметра. Возвращает созданный элемент

      createTextNode(text) : создает и возвращает текстовый узел. В качестве параметра передается текст узла.

    var elem = document.createElement("div"); var elemText = document.createTextNode("Привет мир");

    Таким образом, переменная elem будет хранить ссылку на элемент div . Однако одного создания элементов недостаточно, их еще надо добавить на веб-страницу.

    Для добавления элементов мы можем использовать один из методов объекта Node:

      appendChild(newNode) : добавляет новый узел newNode в конец коллекции дочерних узлов

      insertBefore(newNode, referenceNode) : добавляет новый узел newNode перед узлом referenceNode

    Используем метод appendChild:

    Заголовок статьи

    Первый абзац

    Второй абзац

    var articleDiv = document.querySelector("div.article"); // создаем элемент var elem = document.createElement("h2"); // создаем для него текст var elemText = document.createTextNode("Привет мир"); // добавляем текст в элемент в качестве дочернего элемента elem.appendChild(elemText); // добавляем элемент в блок div articleDiv.appendChild(elem);

    Сначала создаем обычный элемент заголовка h2 и текстовый узел. Затем текстовый узел добавляем в элемент заголовка. Затем заголовок добавляем в один из элементов веб-страницы:

    Однако нам необязательно для определения текста внутри элемента создавать дополнительный текстовый узел, так как мы можем воспользоваться свойством textContent и напрямую ему присвоить текст:

    Var elem = document.createElement("h2"); elem.textContent = "Привет мир";

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

    Теперь рассмотрим, как аналогичный элемент добавить в начало коллекции дочерних узлов блока div:

    Var articleDiv = document.querySelector("div.article"); // создаем элемент var elem = document.createElement("h2"); // создаем для него текст var elemText = document.createTextNode("Привет мир"); // добавляем текст в элемент в качестве дочернего элемента elem.appendChild(elemText); // получаем первый элемент, перед которым будет идти добавление var firstElem = articleDiv.firstChild.nextSibling; // добавляем элемент в блок div перед первым узлом articleDiv.insertBefore(elem, firstElem);

    Если нам надо вставить новый узел на второе, третье или любое другое место, то нам надо найти узел, перед которым надо вставлять, с помощью комбинаций свойств firstChild/lastChild и nextSibling/previousSibling.

    Копирование элемента

    Иногда элементы бывают довольно сложными по составу, и гораздо проще их скопировать, чем с помощью отдельных вызовов создавать из содержимое. Для копирования уже имеющихся узлов у объекта Node можно использовать метод cloneNode() :

    Var articleDiv = document.querySelector("div.article"); // клонируем элемент articleDiv var newArticleDiv = articleDiv.cloneNode(true); // добавляем в конец элемента body document.body.appendChild(newArticleDiv);

    В метод cloneNode() в качестве параметра передается логическое значение: если передается true, то элемент будет копироваться со всеми дочерними узлами; если передается false - то копируется без дочерних узлов. То есть в данном случае мы копируем узел со всем его содержимым и потом добавляем в конец элемента body.

    Удаление элемента

    Для удаления элемента вызывается метод removeChild() объекта Node. Этот метод удаляет один из дочерних узлов:

    Var articleDiv = document.querySelector("div.article"); // находим узел, который будем удалять - первый параграф var removableNode = document.querySelectorAll("div.article p"); // удаляем узел articleDiv.removeChild(removableNode);

    В данном случае удаляется первый параграф из блока div

    Замена элемента

    Для замены элемента применяется метод replaceChild(newNode, oldNode) объекта Node. Этот метод в качестве первого параметра принимает новый элемент, который заменяет старый элемент oldNode, передаваемый в качестве второго параметра.

    Var articleDiv = document.querySelector("div.article"); // находим узел, который будем заменять - первый параграф var oldNode = document.querySelectorAll("div.article p"); // создаем элемент var newNode = document.createElement("h2"); // создаем для него текст var elemText = document.createTextNode("Привет мир"); // добавляем текст в элемент в качестве дочернего элемента newNode.appendChild(elemText); // заменяем старый узел новым articleDiv.replaceChild(newNode, oldNode);

    В данном случае заменяем первый параграф заголовком h2.