Получение HTML определенного DOM-элемента в JavaScript

Быстрый ответ

Для получения полного HTML элемента вам стоит использовать свойство element.outerHTML:

var html = document.getElementById('myElement').outerHTML;

Если требуется извлечь внутреннее содержимое элемента, используйте свойство element.innerHTML.

Альтернативные решения

В зависимости от ситуации, уместными могут быть и другие подходы, кроме outerHTML:

Создание клона для безопасности

// Безопасность важнее всего – создаём клон элемента
var clone = document.getElementById('myElement').cloneNode(true);
var html = clone.outerHTML;

Подробнее об этом расскажет наш спикер на видео

Использование CSS-селекторов

// Изысканный способ выбора элементов, обладающих определенными атрибутами
var html = document.querySelector('.myClass[attr="value"]').outerHTML;

Работа со старыми версиями браузеров

// Возвращаемся к проверенной временем технике обёртывания в div
var el = document.getElementById('myElement');
var wrapper = document.createElement('div');
wrapper.appendChild(el.cloneNode(true));
var html = wrapper.innerHTML;

Понимание разницы между outerHTML и innerHTML значительно расширит ваши возможности в JavaScript.

Визуализация

Представьте себе, что извлечение HTML-содержимого DOM-элемента – это словно фотографирование дерева на веб-странице.

DOM Элемент (🌳): Это дерево на нашем веб-участке

// Запечатляем момент!
let treeSnapshot = document.querySelector(".tree").outerHTML;

Таким образом, снимок (📸) охватывает не только само дерево (🌳), но и все, что его окружает (outerHTML).

Погружение в тему

Работа со сложными структурами

// Как в запутанных сценариях фильма "Инцепция", когда одна структура вложена в другую
var html = new XMLSerializer().serializeToString(document.getElementById('complexTable'));

Продвинутая работа с createRange()

// Точно выделяем нужные элементы, словно делаем снайперский выстрел
var range = document.createRange();
range.selectNode(document.getElementById('partialContent'));
var html = range.cloneContents().outerHTML;

Минимизация рефлоу браузера

// Работайте эффективно, экономя ресурсы браузера.
// Клонируйте узлы и манипулируйте ими вне DOM.
// Накопите целый ряд действий перед воздействием на DOM.

Полезные материалы

1. Свойство Element: outerHTML – Web API | MDN — подробный обзор использования outerHTML в JavaScript для получения полного HTML элемента.
2. XMLSerializer – Web API | MDN — говорим о облегчении работы со сложными структурами за счет использования сериализации XML.
3. Свойство HTML DOM Element outerHTML — полезная практика использования outerHTML.
4. Свойство Element: innerHTML – Web API | MDN — как извлечь внутреннее содержимое элемента.
5. DOM дерево — введение в узлы DOM и их свойства.
6. Полное руководство по элементу таблицы | CSS-Tricks — применительно к работе с вложенными таблицами.
7. Метод Document: createRange() – Web API | MDN — о выборочной сериализации частей DOM.