Создание и добавление узлов и элементов.

document.createElement(tagName) - создает элемент согласно заданному тегу.

Элемент создан, но ещё не отрисовался (мы его не видим). var div = document.createElement('div');

document.createTextNode('Some text') - создает текстовый узел с заданным текстом.

element.cloneNode(isDeepCopy) - создает копию узла. Если аргументом передано true, копия создастся со вложенными узлами.

parentNode.appendChild(child) - добавит внутрь parentNode элемент child. Добавленный элемент будет вставлен после всех дочерних узлов (если узел уже был на странице, он просто будет перемещен на новое место).

var div = document.createElement('div'); div.className = 'new-block'; document.body.appendChild(div);

parentNode.insertBefore(newElement, nextElement) - добавит в parentNode элемент newElement перед nextElement. var div = document.createElement('div'); document.body.insertBefore(div, document.body.firstChild);

Удаление узлов и элементов.

parentNode.removeChild(child) - удалит внутри parentNode элемент child.

Пример удаления узла: var div = document.querySelector('div'); div.parentElement.removeChild(div);

parentNode.replaceChild(newChild, element) - внутри parentNode заменит узел element на newChild. elem.remove() - удаляет элемент. Метод не работает в IE11-

Удалить все содержимое элемента можно с помощью innerHTML: document.querySelector('div').innerHTML = '';

Добавление множества узлов.

element.insertAdjacentHTML(position, htmlElement) - вставляет html текст в указанную позицию position может принимать одно из следующих значений: 'beforebegin' - перед element; 'afterbegin' - внутри element, перед первым дочерним элементом (потомком); 'beforeend' - внутри element, после последнего дочернего элемента; 'afterend' - после element.

foo

element.insertAdjacentHTML(position, html) - вставляет html текст в указанную позицию: TEST lINK

var strong = document.querySelector('strong'); strong.insertAdjacentHTML('beforeend', 'Span');

TEST lINK Span

element.insertAdjacentElement(position, element) - вставляет element в указанную позицию: TEST lINK Span

var strong = document.querySelector('strong'), span = document.querySelector('span’); strong.insertAdjacentElement('beforebegin', span);

Span TEST lINK

element.insertAdjacentText(position, text) - вставляет текст в указанную позицию:

TEST lINK

var strong = document.querySelector('strong'), newText = 'Test string'; strong.insertAdjacentText('beforeend', newText);

TEST lINKTest string

document.createDocumentFragment() - метод создает объект, похожий на узел DOM (но это не node!). У него есть методы appendChild, removeChild, children и другие, но нет таких, как innerHTML и tagName.

При добавлении documenyFragment на страницу, добавляются только его дети.

Test

var fragment = document.createDocumentFragment(), div = document.createElement('div'); fragment.appendChild(div); document.querySelector('section').appendChild(fragment);

Test