DOM
Манипулирование элементами

Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP React SVG

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

Элемент может быть клонирован путем вызова метода cloneNode . Если первым параметром, переданным в cloneNode является true , дети оригинала также будут клонированы.

var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);

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

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

let newElement = document.createElement("li");
newElement.innerHTML = "new text";

let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");

При вставке элемента мы делаем это под родительским элементом и непосредственно перед определенным дочерним элементом этого родительского элемента.

parentElement.insertBefore(newElement, nextSibling);

Новый элемент вставлен под parentElement и непосредственно перед nextSibling .

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

parentElement.insertBefore(newElement, null);

Новый элемент вставлен под parentElement в качестве последнего дочернего элемента.

Вместо этого appendChild() может использоваться для простого добавления дочернего элемента к дочерним элементам родительского узла.

parentElement.appendChild(newElement);

Новый элемент вставлен под parentElement в качестве последнего дочернего элемента.

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

let newElement = document.createElement("li");
newElement.innerHTML = "new text";

let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");

Чтобы заменить элемент, мы используем replaceChild :

parentElement.replaceChild(newElement, nextSibling);

nextSibling удаляется из DOM. На его месте теперь находится newElement .

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

Элемент можно удалить, вызвав remove() на нем. В качестве альтернативы можно вызвать removeChild() для своего родителя. removeChild() имеет лучшую поддержку браузера, чем remove() .

element.remove();

element и все его дочерние элементы удаляются из DOM.

parentElement.removeChild(element);

element и все его дочерние элементы удаляются из DOM.

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

Применить и Подготовить методы

JavaScript теперь имеет методы Append и Prepend, которые присутствовали в jQuery

Основным преимуществом append и prepend является отличие от appendChild и insertBefore , он может принимать любое количество аргументов либо элемента HTML, либо обычного текста (который будет преобразован в текстовые узлы).

Чтобы добавить 1 div, 1 текстовый узел и 1 span

document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))

Это изменит страницу на следующую структуру

<body>
      .....(other elements)
      <div></div>
      "Hello World"
      <span></span>
</body>

Чтобы добавить то же самое в теле

использование

document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))

Это изменит страницу на следующую структуру

<body>
      <div></div>
      "Hello World"
      <span></span>
      .....(other elements)
</body>

Обратите внимание, что поддержка браузера

Chrome 54+
Firefox 49+
Opera 39+

Читать дальше в MDN

присоединять

Prepend

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow