Часто мы хотим добавить 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 и присоединитесь к нашему Коллективу талантов.