Js динамическое создание элементов. JavaScript: Как добавить новый элемент в объект? Пример: показать сообщение

В этой записи я хочу рассказать как добавить или удалить элемент из объекта в JavaScript. Это очень просто, но многие новички, как и я раньше, часто путались в этом.

Создадим объект для примера

var obj = { name: "alex", last_name: "petrov", website: "сайт", };

У нас есть простой объект, внутри которого есть такие данные как name (имя), last_name (фамилия) и website (сайт). Данные могут быть абсолютно любыми, но в целях этой записи они будут именно такими.

Добавление нового элемента

obj.country = "ru"; // добавит новый ключ "country" в объект cо значением "ru" obj["city"] = "Moscow"; // так же добавит новый ключ, только "city" со значением "Moscow"

В коде выше все понятно, но лишь придам ясности: вы можете добавлять новые значения в объект в синтаксисе объекта, используя «.» и ключ или же обычный формат массива. Если вы объявите как массив, то obj все равно остается объектом, так как ранее вы его обозначили именно таким благодаря {} .

Создать объект внутри объекта

obj.other_obj = {}; // создадим новое значение other_obj в obj и сделаем его объектом

Теперь добавим туда какие-нибудь данные:

Obj.other_obj.first = "первый ключ нового объекта"; obj.other_obj.second = "второй";

Мы создали два новых значения first и second внутри other_obj .

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

delete obj.name; // возвращает: true

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

Obj = {}; // Сделает объект снова пустым

На этой все, если у вас остались какие-то вопросы по объектам в JavaScript, пишите ниже комментарий, постараюсь вам помочь.

Это четвертая часть постов, посвященная нативным эквивалентам 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 Text
Some 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)

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

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

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

  1. Создать необходимый узел, используя один из следующих методов:
  • createElement() - создаёт элемент (узел) с указанным именем (тегом). Метод createElement(element) имеет один обязательный параметр (element) - это строка, содержащая имя создаваемого элемент (тега). Указывать имя элемента (тега) в параметре необходимо заглавными буквами. В качестве результата данный метод возвращает элемент, который был создан.
  • createTextNode() - создаёт текстовый узел с указанным текстом. Метод createTextNode(text) имеет один обязательный параметр (text) - это строка, содержащая текст текстового узла. В качестве результата данный метод возвращает текстовый узел, который был создан.
  • Указать место в дереве, куда необходимо вставить узел. Для этого необходимо воспользоваться одним из следующих методов:
    • appendChild() - добавляет узел как последний дочерний узел элемента, для которого вызывается данный метод. Метод appendChild(node) имеет один обязательный параметр это узел (node), который Вы хотите добавить. В качестве результата данный метод возвращает добавленный узел.
    • insertBefore() - вставляет узел как дочерний узел элемента, для которого вызывается данный метод. Метод insertBefore(newNode,existingNode) имеет два параметра: newNode (обязательный) - узел, который Вы хотите добавить, existingNode (не обязательный) - это дочерний узел элемента перед которым, необходимо вставить узел. Если второй параметр (existingNode) не указать, то данный метод вставит его в конец, т.е. в качестве последнего дочернего узла элемента для которого вызывается данный метод. В качестве результата метод insertBefore() возвращает вставленный узел.

    Например:

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

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

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

    1. Создать элемент (узел) LI .
    2. Создать текстовый узел, содержащий текст "Смартфон".
    3. Добавить созданный текстовый узел как последний дочерний узел только что созданному элементу LI
    4. Добавить недавно созданный узел 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 этапа:

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

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

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

    Задание

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

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

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

    1. Получить (найти) этот узел в дереве. Это действие обычно осуществляется одним из следующих методов: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() или querySelectorAll() .
    2. Вызвать у родительского узла метод 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); }

    Задание

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