Продолжаем работу с объектом document в JavaScript и сегодня мы научимся создавать элементы HTML в документе, добавлять в них контент, а также оформлять эти элементы с помощью методов JavaScript. Начнем.
Итак, в прошлой статье мы научились создавать элементы HTML и добавлять их в DOM дерево. При этом мы можем добавлять элемент как в конец выбранного родителя — для этого используем метод appendChild, так и перед каким-либо элементом — метод insertBefore поможет в этом случае.
Однако зачем нам пустой элемент? Было бы неплохо добавить в него контент, а также стилизовать, оформить созданный элемент. Начнем с добавления контента. Здесь нам поможет уже знакомое свойство innerHTML:
1.var newDiv = document.createElement('div');2.newDiv.innerHTML = '<h2>Заголовок</h2><p>Lorem ipsum dolor sit amet.</p>';3.var script = document.getElementsByTagName('script')[0];4.document.body.insertBefore(newDiv, script);
Супер, контент добавили. Но сам элемент сейчас не вписывается в разметку, давайте добавим ему какой-нибудь класс. Это можно сделать, обратившись к свойству className:
1.var newDiv = document.createElement('div');2.newDiv.innerHTML = '<h2>Заголовок</h2><p>Lorem ipsum dolor sit amet.</p>';3.newDiv.className = 'container';4.var script = document.getElementsByTagName('script')[0];5.document.body.insertBefore(newDiv, script);
Достаточно просто, не так ли? Ну и, наконец, давайте узнаем, как можно удалить элемент из DOM дерева. Сделать это поможет метод removeChild. Допустим у нас есть следующая верстка:
1.<div class="container">2.<h1>Hello, world!</h1>3.<p>Lorem ipsum dolor sit amet.</p>4.</div>И из нее мы хотим удалить заголовок. Это можно сделать примерно так:
1.var elem = document.getElementsByTagName('h1')[0];2.elem.parentNode.removeChild(elem);
Все получилось. На этом мы остановимся в данной статье.
Источник: https://webformyself.com/sozdanie-elementa-html-v-javascript-chast-2/