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

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

Создание стандартного элемента div.

const div = document.createElement('div');
div.textContent = 'Новый блок';
console.log(div.outerHTML);

<div>Новый блок</div>

Создание элемента с дополнительными атрибутами.

const img = document.createElement('img');
img.src = 'photo.jpg';
img.alt = 'Изображение';
console.log(img.outerHTML);

<img src="photo.jpg" alt="Изображение">

Использование параметра options для создания кастомного элемента.

const customElem = document.createElement('div', { is: 'my-widget' });
console.log(customElem.getAttribute('is'));

my-widget

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

Для создания элементов также применяются:

• innerHTML и outerHTML: позволяют задавать HTML-строку. Могут быть уязвимы для XSS-атак и менее производительны при множественных операциях.
• insertAdjacentHTML(): вставляет HTML-строку в указанную позицию относительно элемента. Безопаснее innerHTML, но тоже парсит строку.
• cloneNode(): клонирует существующий элемент. Полезен для создания множества одинаковых элементов из шаблона.
• Шаблонные теги <template>: хранят фрагменты HTML, которые можно клонировать и вставлять. Самый безопасный и производительный способ для сложных повторяющихся структур.

Распространенные ошибки

Забывают добавить элемент в DOM.

const elem = document.createElement('p');
elem.textContent = 'Текст';
// Элемент создан, но не виден на странице

(Элемент отсутствует в документе)

Некорректное имя тега вызывает исключение.

const elem = document.createElement('');
// или
document.createElement('12div');

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('') is not a valid name.

Путаница между свойством textContent и innerHTML при добавлении текста.

const div = document.createElement('div');
div.innerHTML = '<strong>Жирный</strong> текст';
console.log(div.textContent);

Жирный текст

Современные изменения

Добавлен второй аргумент options для поддержки кастомных встроенных элементов (Customized Built-in Elements). Это позволяет создавать элементы, расширяющие встроенные HTML-теги.

Пример с использованием класса, расширяющего HTMLParagraphElement:

class WordCount extends HTMLParagraphElement {
  constructor() {
    super();
  }
}
customElements.define('word-count', WordCount, { extends: 'p' });
const p = document.createElement('p', { is: 'word-count' });

Расширенные примеры использования

Создание элемента с обработчиком события.

const btn = document.createElement('button');
btn.textContent = 'Нажми';
btn.addEventListener('click', () => alert('Клик!'));
document.body.append(btn);

Формирование сложной структуры.

const list = document.createElement('ul');
for (let i = 1; i <= 3; i++) {
  const item = document.createElement('li');
  item.textContent = `Пункт ${i}`;
  list.append(item);
}
console.log(list.outerHTML);

<ul><li>Пункт 1</li><li>Пункт 2</li><li>Пункт 3</li></ul>

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

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

Использование DocumentFragment для пакетного добавления.

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = `Элемент ${i}`;
  fragment.append(div);
}
document.body.append(fragment);

Создание элементов в других языках

Python (библиотека xml.etree.ElementTree для XML):

import xml.etree.ElementTree as ET
elem = ET.Element('div', attrib={'class': 'box'})
elem.text = 'Текст'
print(ET.tostring(elem, encoding='unicode'))

<div class="box">Текст</div>

PHP (DOMDocument):

$dom = new DOMDocument();
$div = $dom->createElement('div', 'Контент');
$div->setAttribute('id', 'main');
echo $dom->saveHTML($div);

<div id="main">Контент</div>

Отличия: в JavaScript элемент автоматически связан с документом, но не прикреплен к DOM. В других языках обычно требуется явно создать документ и задать его корнем.