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

Дата публикации: 2016-11-28

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

Все что мы с вами делали до этого, так это работали с уже готовыми элементами DOM дерева, т.е. с готовыми элементами документа. Мы получали все содержимое элемента или же только его контент, а также изменяли их. Однако JavaScript позволяет создавать и новые элементы в документе. Сделать это можно с помощью метода createElement. Давайте попробуем:

var newDiv = document.createElement('div');

1	var newDiv = document.createElement('div');

В документе мы хотим создать новый тег div. Однако если сейчас мы посмотрим на наш документ через Firebug, то никакого нового элемента не увидим, кроме подключаемых скриптов в body больше ничего нет:

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

Все правильно. Мало создать элемент, нужно еще указать, куда именно мы хотим добавить его в документ, а для этого существуют другие методы. Например, метод appendChild позволяет добавить созданный элемент в конец. Попробуем создать в документе какой-нибудь элемент и добавим созданный динамически элемент в body:

var newDiv = document.createElement('div');
document.body.appendChild(newDiv);

1 2	var newDiv = document.createElement('div'); document.body.appendChild(newDiv);

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

Как видим, новый div добавлен самым последним элементом в body и разместился перед закрывающим тегом body, после подключения скриптов. Но это не очень хорошо, хотелось бы вставить новый элемент до подключения скриптов. Как это сделать?

Для этого познакомимся с еще одним методом — insertBefore. Данный метод позволяет добавить элемент, переданный первым параметром, перед элементом, который указан вторым параметром. Попробуем:

var newDiv = document.createElement('div');
var script = document.getElementsByTagName('script')[0];
document.insertBefore(newDiv, script);

var newDiv = document.createElement('div');

var script = document.getElementsByTagName('script')[0];

document.insertBefore(newDiv, script);

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

Упс, не получилось. Так просто задачу не решить. Для того, чтобы вставить новый тег перед скриптами, необходимо получить родительский элемент этих самых скриптов в дереве DOM. Поможет это сделать специальное свойство — parentNode, которое мы можем вызывать для переменной script с первым скриптом:

var newDiv = document.createElement('div');
var script = document.getElementsByTagName('script')[0];
var parent = script.parentNode;
parent.insertBefore(newDiv, script);

var newDiv = document.createElement('div');

var script = document.getElementsByTagName('script')[0];

var parent = script.parentNode;

parent.insertBefore(newDiv, script);

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

Вот теперь все получилось. На самом деле я вас немного обманул, когда говорил, что так просто задачу не решить. Но сделал это исключительно для того, чтобы вы познакомились со свойством parentNode. На самом же деле мы знаем родительский элемент скриптов — это body. Соответственно, мы ничего можем не получать и сразу обратиться к body:

var newDiv = document.createElement('div');
var script = document.getElementsByTagName('script')[0];
// var parent = script.parentNode;
document.body.insertBefore(newDiv, script);

var newDiv = document.createElement('div');

var script = document.getElementsByTagName('script')[0];

// var parent = script.parentNode;

document.body.insertBefore(newDiv, script);

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

Метки: JavaScript