Удаление и создание элементов в JavaScript

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

Удалить поля объекта

Не самая распространенная задача. Удалить какое-либо поле или метод объекта – значит очистить ячейку памяти, по которому оно хранилось.

Удалить поле объекта позволяет оператор delete:

DeletesomeObject.property// синтаксис с помощью точки
deletesomeObject[‘property’]// строка в качестве ключа
deletesomeObject[index]// переменная в качестве ключа

Заметьте, что оператор delete возвращает удаленное свойство. Если его нужно сохранить, лучше завести переменную.

Создавать переменную в глобально – практика плохая. Но если так делать, переменная автоматически становится свойством объекта window:

deleteobj.property// синтаксис через точку
deleteobj[‘property’]// строка в качестве ключа
deleteobj[index]// переменная в качестве ключа

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

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

const names =[«Nick»,»Dima»,»Karina»]

delete names[3];
if(3in trees){
// этот участок кода не выполнится
console.log(«Karinaexists!»)
}

Удаление элементов из DOM-дерева

Удалить элемент из DOMа значит навсегда избавиться от него. Получить его в дальнейшем будет невозможно:

<div id=»box»>
<div id=»first»></div>
<div id=»second»></div>
</div>

constelem=document.querySelector(«#first»);
elem.remove(); // удаляем элемент из DOM-дерева
alert(document.querySelector(«#box»).innerHTML);// исчез блок #first

Заметьте, что родитель по-прежнему существует.

Удалить дочерний DOM-элемент: removeChild()

Заметьте, данный, как и Node.remove(), удаляет элемент «намертво»:

constformerChild=parentNode.removeChild(child);// возвращаем удаленный элемент в переменную
parentNode.removeChild(child);// удаляем из DOM, но никуда не сохраняем

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

Удаление в JQuery

Синтаксис удаления в JQuery немногим проще, но функционал, как вы понимаете, прежний:

$(selector).remove()

Заметьте, метод уничтожает все дочерние и текстовые элементы данного элемента.

Удалить все дочерние элементы у элемента

constelem=document.getElementById(«element»); // получили элемент
while(elem.firstChild){// пока у узла есть первый ребенок
elem.removeChild(elem.firstChild);// удаляем первого ребенка
}

elem.firstChild возвращает первый DOM-элемент, являющийся непосредственным потомком данного узла. Используем метод Node.removeChild(), который рассмотрели в абзаце выше.

$(nodeElement).empty();// метод JQuery

Создание элемента

Выбора здесь не так уж и много:

constnewElement=document.createElement(tag,options)

options — необязательный объект, который может только содержать поле is

Устаревшие методы вставки и удаления

Метод appendChild() вставляет элемент в конец дочерних элементов узла:

parentElement.appendChild(nodeElement)

Метод replaceChild() заменяет «старого» ребенка на «нового»:

parentElement.replaceChild(nodeElement,oldChild)

Метод insertBefore() вставляет элемент перед некоторым элементом в родительском узле:

parentElement.insertBefore(nodeElement,nextSibling)