AppendChild: примеры (JAVASCRIPT)

Простые примеры использования

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

const parent = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = 'Новый пункт';
const appendedNode = parent.appendChild(newItem);
console.log(appendedNode === newItem);

true

Перемещение существующего элемента

const item = document.querySelector('.item');
const newContainer = document.getElementById('container');
const movedItem = newContainer.appendChild(item);
console.log(movedItem.textContent);

Содержимое элемента

Добавление текстового узла

const div = document.createElement('div');
const textNode = document.createTextNode('Текст');
div.appendChild(textNode);
console.log(div.outerHTML);

<div>Текст</div>

Альтернативные методы в JavaScript

• insertBefore(newNode, referenceNode) - вставляет узел перед указанным дочерним элементом. Полезен для точного позиционирования.
• replaceChild(newChild, oldChild) - заменяет один дочерний узел на другой.
• append() - современная альтернатива, принимающая несколько узлов или строк. Не возвращает значение.
• prepend() - добавляет узлы или строки в начало родительского элемента.
• innerHTML и outerHTML - свойства для работы с HTML-разметкой как со строкой.

Метод appendChild лучше использовать при работе с узлами DOM, требующими перемещения. Для добавления строк или нескольких элементов удобнее применять append().

Типичные ошибки

Попытка добавить элемент, который не является узлом

const parent = document.createElement('div');
parent.appendChild('текст'); // Ошибка

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Создание циклических ссылок

const parent = document.createElement('div');
const child = document.createElement('span');
parent.appendChild(child);
// Попытка сделать родителя потомком своего же потомка
child.appendChild(parent); // Приводит к ошибке

Uncaught DOMException: Failed to execute 'appendChild' on 'Node':
The new child element contains the parent.

Игнорирование возвращаемого значения при перемещении

const item1 = document.getElementById('item1');
const item2 = document.getElementById('item2');
const container = document.getElementById('container');
container.appendChild(item1);
container.appendChild(item1); // Второй вызов ничего не изменит

Элемент не будет продублирован, так как это тот же объект DOM.

Эволюция метода

Сам метод appendChild остается стабильным в течение многих лет. Основные изменения касаются появления альтернатив в современных стандартах:

• В ES6 появился метод append(), который принимает несколько аргументов.
• В современных браузерах улучшена производительность при работе с DocumentFragment.
• Стандартизировано поведение с SVG-элементами и элементами из других пространств имен XML.

Спецификация DOM Living Standard поддерживает обратную совместимость метода appendChild.

Расширенные сценарии применения

Оптимизация производительности через DocumentFragment

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `Элемент ${i}`;
    fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

DocumentFragment позволяет добавить множество элементов за одну операцию перерисовки.

Работа с элементами SVG

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '100');
svg.setAttribute('height', '100');
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
svg.appendChild(circle);
document.body.appendChild(svg);

Создание древовидной структуры

function createTree(depth, maxDepth) {
    const div = document.createElement('div');
    div.className = 'node';
    if (depth < maxDepth) {
        for (let i = 0; i < 3; i++) {
            div.appendChild(createTree(depth + 1, maxDepth));
        }
    }
    return div;
}
document.body.appendChild(createTree(0, 3));

Интеграция с пользовательскими компонентами

class CustomElement extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({mode: 'open'});
        const style = document.createElement('style');
        style.textContent = `:host { display: block; }`;
        const content = document.createElement('div');
        content.textContent = 'Теневой DOM';
        shadow.appendChild(style);
        shadow.appendChild(content);
    }
}
customElements.define('custom-el', CustomElement);
document.body.appendChild(document.createElement('custom-el'));

Аналоги в других языках программирования

Python (BeautifulSoup)

from bs4 import BeautifulSoup
soup = BeautifulSoup('<div></div>', 'html.parser')
parent = soup.div
new_tag = soup.new_tag('span')
new_tag.string = 'Элемент'
parent.append(new_tag)
print(parent)

<div><span>Элемент</span></div>

PHP (DOMDocument)

$dom = new DOMDocument();
$parent = $dom->createElement('div');
$child = $dom->createElement('span', 'Текст');
$parent->appendChild($child);
echo $dom->saveHTML($parent);

<div><span>Текст</span></div>

Java (JSoup)

Document doc = Jsoup.parse("<div></div>");
Element parent = doc.select("div").first();
Element child = new Element(Tag.valueOf("span"), "");
child.text("Контент");
parent.appendChild(child);
System.out.println(parent);

<div>
 <span>Контент</span>
</div>

Основное отличие JavaScript реализации - ее интеграция с живым DOM браузера, тогда как другие языки обычно работают с парсерами вне браузерной среды.