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

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

Создание простого параграфа с текстом:

const newParagraph = document.createElement('p');
newParagraph.textContent = 'Это новый абзац.';
document.body.appendChild(newParagraph);

// В тело страницы добавится элемент <p>Это новый абзац.</p>

Создание элемента с атрибутами и стилями:

const newButton = document.createElement('button');
newButton.id = 'submitBtn';
newButton.className = 'btn primary';
newButton.style.margin = '10px';
newButton.textContent = 'Нажать';
console.log(newButton.outerHTML);

// Лог в консоли: <button id="submitBtn" class="btn primary" style="margin: 10px;">Нажать</button>

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

• innerHTML: Позволяет задавать HTML-содержимое элемента строкой. Подходит для быстрой вставки сложной разметки, но может быть небезопасным (XSS) и полностью заменяет дочерние элементы, что ведет к пересозданию DOM-узлов. createElement более эффективен при частых обновлениях и безопаснее.
• insertAdjacentHTML(): Парсит строку как HTML и вставляет результат в указанную позицию относительно элемента ('beforebegin', 'afterbegin', 'beforeend', 'afterend'). Объединяет гибкость вставки HTML-строк с точным позиционированием. Не перезаписывает все дочерние элементы, в отличие от innerHTML.
• cloneNode(): Создает копию существующего DOM-узла. Эффективен, когда нужно дублировать сложную структуру элемента с минимальными затратами.

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

PHP (DOMDocument): Работа с DOM требует создания документа и узлов.

$dom = new DOMDocument();
$div = $dom->createElement('div', 'Содержимое');
$dom->appendChild($div);
echo $dom->saveHTML();

<div>Содержимое</div>

Python (Beautiful Soup): Популярная библиотека для парсинга и создания HTML.

from bs4 import BeautifulSoup
soup = BeautifulSoup('', 'html.parser')
new_tag = soup.new_tag('a', href="https://example.com")
new_tag.string = "Ссылка"
print(new_tag)

<a href="https://example.com">Ссылка</a>

C (с использованием библиотеки libxml2): Низкоуровневое создание узлов XML/HTML.

#include <libxml/parser.h>
#include <libxml/tree.h>
int main() {
    xmlDocPtr doc = xmlNewDoc(BAD_CAST "1.0");
    xmlNodePtr root = xmlNewNode(NULL, BAD_CAST "root");
    xmlNodePtr child = xmlNewTextChild(root, NULL, BAD_CAST "child", NULL);
    xmlDocSetRootElement(doc, root);
    xmlFreeDoc(doc);
    return 0;
}

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

1. Создание элемента без добавления в DOM. Элемент существует в памяти, но не отображается.

const div = document.createElement('div');
div.textContent = 'Я здесь!';
// Элемент div не появится на странице, пока не будет вызван, например:
// document.body.appendChild(div);

2. Некорректное имя тега. Передача не строки или пустой строки может привести к ошибке.

const el = document.createElement(null); // TypeError

3. Ошибочное предположение, что созданный элемент сразу имеет размеры или стили по умолчанию браузера. Стили применяются только после добавления в DOM.

Последние изменения

Спецификация DOM Living Standard постоянно развивается. Существенных изменений в сигнатуре document.createElement() не было. Однако, появился связанный метод document.createElementNS() для создания элементов в определенном пространстве имен (например, SVG). Также, в современных браузерах улучшена производительность создания и вставки элементов, особенно при использовании DocumentFragment.

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

Создание таблицы с данными:

const table = document.createElement('table');
const tbody = document.createElement('tbody');
const data = [['A', 'B'], ['C', 'D']];
data.forEach(rowData => {
    const row = document.createElement('tr');
    rowData.forEach(cellData => {
        const cell = document.createElement('td');
        cell.textContent = cellData;
        row.appendChild(cell);
    });
    tbody.appendChild(row);
});
table.appendChild(tbody);
document.body.appendChild(table);

// На странице появится таблица 2x2 с ячейками A, B, C, D.

Использование с DocumentFragment для оптимизации:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Пункт ${i}`;
    fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

Создание пользовательского элемента с событиями:

const card = document.createElement('article');
card.classList.add('card');
const title = document.createElement('h2');
title.textContent = 'Заголовок карточки';
const closeBtn = document.createElement('button');
closeBtn.textContent = '×';
closeBtn.addEventListener('click', () => card.remove());
card.appendChild(closeBtn);
card.appendChild(title);
document.body.appendChild(card);