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