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