Создание элемента HTML в JavaScript. Часть 2

Создание элемента HTML в JavaScript

От автора: приветствую вас, друзья. Продолжаем работу с объектом document в JavaScript и сегодня мы научимся создавать элементы HTML в документе, добавлять в них контент, а также оформлять эти элементы с помощью методов JavaScript. Начнем.

Итак, в прошлой статье мы научились создавать элементы HTML и добавлять их в DOM дерево. При этом мы можем добавлять элемент как в конец выбранного родителя — для этого используем метод appendChild, так и перед каким-либо элементом — метод insertBefore поможет в этом случае.

Однако зачем нам пустой элемент? Было бы неплохо добавить в него контент, а также стилизовать, оформить созданный элемент. Начнем с добавления контента. Здесь нам поможет уже знакомое свойство innerHTML:

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);

Создание элемента HTML в JavaScript

Супер, контент добавили. Но сам элемент сейчас не вписывается в разметку, давайте добавим ему какой-нибудь класс. Это можно сделать, обратившись к свойству className:

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);

Создание элемента HTML в JavaScript

Достаточно просто, не так ли? Ну и, наконец, давайте узнаем, как можно удалить элемент из DOM дерева. Сделать это поможет метод removeChild. Допустим у нас есть следующая верстка:

<div class="container">
    <h1>Hello, world!</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

И из нее мы хотим удалить заголовок. Это можно сделать примерно так:

var elem = document.getElementsByTagName('h1')[0];
elem.parentNode.removeChild(elem);

Создание элемента HTML в JavaScript

Все получилось. На этом мы остановимся в данной статье. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree