Часто мы хотим добавить HTML-контент в элемент-контейнер.
Иногда мы хотим сделать это, не устанавливая для этого свойство innerHTML элемента-контейнера.
В этой статье мы рассмотрим, как добавить HTML к элементу-контейнеру без установки свойства innerHTML элемента-контейнера с помощью JavaScript.
Используйте document.createElement и appendChild
Один из способов добавить дочерние элементы в элемент-контейнер без установки свойства innerHTML — использовать метод document.createElement для создания элемента.
Затем мы можем вызвать appendChild, чтобы добавить элемент.
Например, если у нас есть следующий HTML:
<div> </div>
Тогда мы можем написать:
const element = document.querySelector('div')
const e = document.createElement('div');
const htmldata = 'hello world'
e.innerHTML = htmldata;
while (e.firstChild) {
element.appendChild(e.firstChild);
}
Мы получаем div, который мы добавили с помощью querySelector.
Затем мы вызываем document.createElement для создания другого div, который мы вставляем в родительский div как дочерний элемент.
Мы устанавливаем значение e.innerHTML вновь созданного элемента, чтобы добавить в него некоторый контент.
А затем мы вызываем element.appendChild, чтобы добавить дочерний элемент в div, который мы изначально добавили.
Теперь мы должны увидеть на экране «hello world».
Используйте метод insertAdjacentHTML
Другой способ вставить дочерний элемент в элемент-контейнер в качестве дочернего элемента — использовать метод insertAdjacentHTML .
Если у нас есть следующий HTML:
<div> </div>
Затем мы можем использовать его, написав:
const element = document.querySelector('div')
element.insertAdjacentHTML('beforeend', '<div>hello world</div>');
Мы получаем div с querySelector .
Затем мы вызываем insertAdjacentHTML с 'beforeend' и HTML, который мы хотим вставить в div в качестве аргументов.
Теперь мы должны увидеть тот же результат, что и в предыдущем примере.
Заключение
Мы можем добавить HTML к элементу-контейнеру, не устанавливая innerHTML с помощью JavaScript, используя различные методы, доступные в объектах элементов DOM.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
