Добавление нового DOM элемента из HTML строки: ul, li

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

Для того чтобы преобразовать HTML-строку в DOM-элемент, вы можете воспользоваться DOMParser:

const elem = new DOMParser().parseFromString('<p>Здравствуй, мир!</p>', 'text/html').body.firstChild;

Этот код создаст элемент, содержащий фразу "Здравствуй, мир!". Далее его можно добавить в документ с помощью таких методов как elem.appendChild().

Используем тег <template> на пользу себе

Тег <template> подходит для временного хранения HTML-кода, который вы собираетесь использовать позднее, без необходимости разбирать строку:

const template = document.createElement('template');
template.innerHTML = '<div class="new">Это новый div</div>';
const newElement = template.content.firstChild;

С <template> вы можете хранить HTML-код на потом и легко клонировать и вставлять его при необходимости.

insertAdjacentHTML – Ваш HTML-конвейер

Метод insertAdjacentHTML позволит добавлять HTML-код напрямую в DOM, выбрав одно из четырёх мест: 'beforebegin', 'afterbegin', 'beforeend', 'afterend':

element.insertAdjacentHTML('beforeend', '<span>Новый контент</span>');

Это быстрый и эффективный способ манипуляции элементами, который предпочтительнее использования innerHTML += в term of productivity.

Метод update() из Prototype – Ваша быстрая полоса на HTML-автостраде

Воспользовавшись библиотекой Prototype, вы сможете быстро преобразовать HTML-строку в DOM-элемент. Для этого используется метод update():

$('elementId').update('<p>Новая дорога. Чистое путешествие!</p>');

Функция $ действует как document.getElementById(). Метод update() удаляет текущее содержимое и заменяет его новым HTML.

Кроссбраузерная совместимость – Назад в будущее

Тег <template> хорош для современных браузеров, но для устаревших версий IE и других старых браузеров используйте следующий способ:

const tempDiv = document.createElement('div');
tempDiv.innerHTML = '<div class="legacy">Живем в наследии времени</div>';
const legacyElement = tempDiv.firstChild;

Этот метод подходит для широкого круга браузеров, чтобы быть уверенным в функциональности вашей веб-страницы.

Берегите ноги! – Основные принципы и предостережения

При использовании innerHTML, не забудьте очистить входные данные, чтобы предотвратить XSS-атаки. Внимательно следите за совместимостью элементов: например, в <table> не получится поместить <div>.

Если вы уже работаете с библиотекой, такой как Prototype или jQuery, оставайтесь верны ей и используйте методы, которые рекомендуют разработчики для надежной работы кода.

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

1. Document: метод createElement() – Web API | MDN — Подробное описание процесса создания элементов с помощью JavaScript.
2. JavaScript DOM элементы — Простой учебный курс по управлению элементами DOM.
3. Element: свойство innerHTML – Web API | MDN — Изучение использования свойства innerHTML для манипуляции HTML-содержимым.
4. javascript – Преимущества createElement перед innerHTML? – Stack Overflow — Дискуссия о преимуществах createElement перед innerHTML.
5. .html() | Документация API jQuery — Справочник по методу .html() в jQuery для работы с HTML-строками.
6. javascript – Почему "element.innerHTML+=" плохой код? – Stack Overflow —Обсуждение происходительности и безопасности при использовании innerHTML.