Узел: метод appendChild()

Метод appendChild() интерфейса Node добавляет узел в конец списка дочерних узлов указанного родительского узла.

Если заданный дочерний узел — DocumentFragment, всё содержимое DocumentFragment перемещается в список дочерних узлов указанного родительского узла.

appendChild() возвращает добавленный узел или, если дочерний узел — DocumentFragment, — очищенный фрагмент.

aChild

Узел для добавления к указанному родительскому узлу (обычно элемент).

Node, который является добавленным дочерним узлом (aChild), за исключением случаев, когда aChild является DocumentFragment, в этом случае возвращается пустой DocumentFragment.

HierarchyRequestError DOMException

Выбрасывается, когда нарушаются ограничения структуры DOM, то есть, если выполняется одно из следующих условий:

• Если родитель aChild не является Document, DocumentFragment или Element.
• Если добавление aChild приведет к циклу, то есть, если aChild является предком узла.
• Если aChild не является DocumentFragment, DocumentType, Element или CharacterData.
• Если текущий узел — Text, а его родитель — Document.
• Если текущий узел — DocumentType, а его родитель — не Document, так как документ должен всегда быть непосредственным потомком документа.
• Если родитель узла — Document, и aChild — DocumentFragment с более чем одним Element дочерним узлом или содержащим Text дочерний узел.
• Если добавление aChild приведет к Document с более чем одним Element как дочерним узлом.

Если заданный дочерний узел — ссылка на существующий узел в документе, appendChild() перемещает его из текущего положения в новое — нет необходимости удалять узел из родительского узла перед добавлением его к другому узлу. Это означает, что узел не может находиться одновременно в двух частях документа. Для создания копии узла перед добавлением его в новый родительский узел можно использовать метод Node.cloneNode(). Копии, созданные с помощью cloneNode , не синхронизируются автоматически.

appendChild() возвращает добавленный узел, а не родительский узел. Это означает, что вы можете добавить новый узел сразу после его создания, не теряя ссылку на него:

const paragraph = document.body.appendChild(document.createElement("p"));
// You can append more elements to the paragraph later

С другой стороны, вы не можете использовать appendChild() в стиле fluent API (как в jQuery).

// This doesn't append three paragraphs:
// the three elements will be nested instead of siblings
document.body
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"));

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

const fragment = document.createDocumentFragment();
const li = fragment
  .appendChild(document.createElement("section"))
  .appendChild(document.createElement("ul"))
  .appendChild(document.createElement("li"));
li.textContent = "hello world";

document.body.appendChild(fragment);

Это генерирует следующую структуру DOM:

<section>
  <ul>
    <li>hello world</li>
  </ul>
</section>

• Node.removeChild()
• Node.replaceChild()
• Node.insertBefore()
• Node.hasChildNodes()
• Element.insertAdjacentElement()
• Element.append()