Использование DOM. Добавление и удаление элементов онлайн урок.


Посредством JS можно также добавлять объекты в объектную модель или удалять их.

Для создания новых объектов DOM используют следующие методы

  • createElement(str) - создает элемент по названию и возвращает его
  • appendChild(element) - добавляет объект как дочерний (последний)
Рассмотрим примеры. Пусть дан веб документ со следующим кодом


<!DOCTYPE html>
<html>

<head></head>

<body>
<div id='block-1'>Block #1</div>
<div id='block-2'>Block #2</div>
<input type='button' value='add'>
</body>

</html>


Реализуем функцию, которая будет добавлять элементы <a> в block-1

function test() {
var element = document.getElementById('block-1');
var link = document.createElement('a');
var br = document.createElement('br');

link.innerHTML = 'Got to Google';
link.href = 'http://google.com';

element.appendChild(br);
element.appendChild(link);
}


Функция сначала определяет объект, в который нужно добавить дочерний объект. Далее, создает два элемента - ссылка <a> и разрыв строки <br>. Далее определяет для объекта ссылки внутренний текст (текст ссылки) и путь, куда ведет ссылка. Далее созданные объекты добавляются как дочерние в конце дочерних элементов block-1.

Вставим этот скрипт в веб-документ и обработаем событие клика по кнопке при помощи это функции



При клике на кнопку будет вызов функции test(). Каждый раз при клике будут созданы новые элементы веб-страницы.

Для удаления элементов из DOM используется метод removeChild(element). Рассмотрим аналогичный пример, написав функцию, которая удаляет объекты из body

<div id='block-1'>Block #1</div>
<div id='block-2'>Block #2</div>
<input type='button' value='remove' onclick='test(); '>


function test() {
var element = document.getElementById('block-1');
document.body.removeChild(element);
}


Тут был сначала определен объект element, а потом был применен метод removeChild, который вызван из контекста объекта body(этот объект в свою очередь является свойством объекта document)

Проверьте свои знания
Реализовать добавление комментариев на "стену". Каждый комментарий должен содержаться в блочном элементе и иметь целочисленный уникальный идентификатор. Для добавления комментария на странице должно находится поле для ввода текста и кнопка добавления. Новый комментарий добавляется вниз списка комментариев. Разместить на странице кнопку для маркировки комментария - закраски его цвета в красный. Значение идентификатора комментария для маркировки взять из отдельного поля.Использовать глобальные переменные