базовый курс

ГРУППА КУРСА

Добавление и удаление элемента в JavaScript

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

Прежде чем добавить новый элемент на страницу, его нужно сначала создать. Метод createElement() создаёт элемент.

document.createElement (тэг)

Параметры:

тэг - тэг создаваемого элемента

Созданный элемент сразу присваивается переменной, через которую осуществляется дальнейшая работа с элементом. После того, как элемент создан ему можно установить id, класс, другие атрибуты и задать стиль. О том, как это делается, будет рассказано в следующих темах. Также его можно наполнить содержимимым. Перечисленные действия лучше сделать до добавления элемента на страницу, чтобы он сразу отобразился в том виде, в котором должен быть. Но можно это сделать и после добавления, большой разницы нет.

Для примера создадим блок и добавим в него текст:

+
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
<script>
9
10
var block = document.createElement('div');
block.innerHTML='Это блок';

Пока блок не отображается, ведь он ещё не добавлен на страницу.

Добавление элемента

В JavaScript добавление элементов делается не на страницу вообще, а внутрь существующего элемента. Созданный элемент добавляется в качестве дочернего у другого элемента. Если он должен быть самым внешним на странице, то его можно добавить как дочерний элемент body. Для добавления элемента можно использовать метод appendChild(), который добавляет новый элемент в самый конец внешнего элемента.

внешний элемент.appendChild (добавляемый элемент)

Добавим блок на страницу:

11
document.body.appendChild(block);

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

Есть также метод insertBefore(), который вставляет новый элемент перед указанным элементом.

внешний элемент.insertBefore (добавляемый элемент, предыдущий элемент)

предыдущий элемент - элемент, перед которым вставляется новый элемент

Для примера создадим на странице блок с абзацами и с помощью скрипта добавим ещё один абзац в начало блока:

HTML код:

8
9
10
<div id="inf">
<p>Этот абзац уже присутствует в блоке</p>
<p>Ещё абзац, который есть в блоке</p></div>

JavaScript:

15
16
17
18
19
var text=document.createElement('p');
text.innerHTML='Новый абзац';
var inf = document.getElementById('inf');
var p = inf.childNodes[1];
inf.insertBefore(text, p);

Чтобы код был более понятным, я создал отдельную переменную для абзаца, перед которым вставляется элемент. На практике так делать совсем не обязательно. Можно указать абзац сразу как дочерний элемент блока. Если нужно вставить элемент не в начало блока а в середину, то нужно просто указать другой элемент, перед которым нужно вставить новый элемент.

Эти методы могут быть использованы не только для добавления элемента, но и для перемещения. Любому элементу на странице можно указать новое место и он будет в это место перемещён.

Если нужно добавить на страницу текстовый узел, то он создаётся с помощью метода createTextNode(). Сам текст пишестя в скобках. В остальном, текстовый узел добавляется так же, как элемент.

Удаление элемента

В JavaScript удаление элемента со страницы осуществляется при помощи метода removeChild(). Также этот метод позволяет удалить другой узел. Также, как и при добавлении, удаление элемента происходит не просто со стриницы, а из более внешнего элемента, внутри которого находится удаляемый. Если он является самым внешним на странице, то можно удалить его из объекта body. Метод removeChild() применяется к внешнему блоку, а удаляемый узел указывается как параметр метода.

внешний элемент.removeChild (удаляемый элемент)

Удалим абзац из блока:

20
inf.removeChild(p);