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