Добавление и удаление узлов

Изменение DOM — ключ к созданию «живых» страниц.

В этой главе мы рассмотрим как создавать новые элементы «на лету» и заполнять их данными.

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

Для создания элементов используются следующие методы документа:

document.createElement(tag)

Создает новый элемент с указанным тегом:

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

document.createTextNode(text)

Создает новый текстовый узел с данным текстом:

var textElem = document.createTextNode('Тут был я');

Новому элементу тут же можно поставить свойства:

var newDiv = document.createElement('div');
newDiv.className = 'myclass';
newDiv.id = 'myid';

newDiv.innerHTML = 'Привет, мир!';

Добавление элемента: appendChild, insertBefore

Чтобы DOM-узел был показан на странице, его необходимо вставить в документ.

Для этого у любого элемента есть метод appendChild:

parentElem.appendChild(elem)

Добавляет elem в список дочерних элементов parentElem. Новый узел добавляется в конец списка.

Следующий пример добавляет новый элемент в уже существующий div:

<div>
  ...
</div>
<script>
  var parentElem = document.body.children[0];

  var newDiv = document.createElement('div');
  newDiv.innerHTML = 'Привет, мир!';

  parentElem.appendChild(newDiv);
</script>

parentElem.insertBefore(elem, nextSibling)

Вставляет elem в список дочерних parentElem, перед элементом nextSibling.

Сделать новый div первым дочерним можно так:

<div>
  ...
</div>
<script>

  var parentElem = document.body.children[0];

  var newDiv = document.createElement('div');
  newDiv.innerHTML = 'Привет, мир!';

*!*
  parentElem.insertBefore(newDiv, parentElem.firstChild);
*/!*
</script>

Вместо nextSibling может быть null, тогда insertBefore работает как appendChild.

parentElem.insertBefore(elem, null);
// то же что:
parentElem.appendChild(elem)

Все методы вставки возвращают вставленный узел, например parent.appendChild(elem) возвращает elem.

Удаление узлов: removeChild

Для удаления узла есть два метода:

parentElem.removeChild(elem)

Удаляет elem из списка детей parentElem.

parentElem.replaceChild(elem, currentElem)

Среди детей parentElem заменяет currentElem на elem.

Оба этих метода возвращают удаленный узел. Они просто вынимают его из списка, никто не мешает вставить его обратно в DOM в будущем.

<div>First div</div>
<div>Last div</div>
<script>
  var first = document.body.children[0];
  var last = document.body.children[1];

  // нет необходимости в предварительном removeChild(last)
  document.body.insertBefore(last, first); // поменять местами
</script>

Пример: показ сообщения

В качестве реального примера рассмотрим добавление сообщения на страницу. Чтобы показывалось посередине экрана и было красивее, чем обычный alert.

HTML-код для сообщения (без JS):

<style>
.message {
  width: 300px;
  height: 130px;
  border: 1px solid gray;
  text-align: center;
}
.message h1 {
  color: red;
  background: azure;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  margin: 0;
}
.message .content {
  height: 50px;
  padding: 10px;
}
</style>

<div class="message">
  <h1>Заголовок</h1>
  <div class="content">Текст Сообщения</div>
  <input class="ok" type="button" value="OK"/>
</div>

Как видно - сообщение вложено в div фиксированного размера message и состоит из заголовка h1, тела content и кнопки OK, которая нужна, чтобы сообщение закрыть.

Кроме того, добавлено немного стилей, чтобы как-то смотрелось.

Создание сообщения

Для создания сложных структур DOM, как правило, используют либо готовый «шаблонный узел» и метод cloneNode, либо свойство innerHTML.

Следующая функция создает сообщение с указанным телом и заголовком.

function createMessage(title, body) {
  // (1)
  var container = document.createElement('div'); 
  
  // (2)
  container.innerHTML = '<div class="message"> \
    <h1>' + title + '</h1> \
    <div class="content">' + body + '</div> \
    <input class="ok" type="button" value="OK"> \
  </div>';

  // (3)
  return container.firstChild;
}

Как видно, она поступает довольно хитро. Чтобы создать элемент по текстовому шаблону, она сначала создает временный элемент container (1), а потом записывает (2) сообщение как innerHTML временного элемента. Теперь готовый элемент можно получить как container.firstChild и вернуть в (3).

Добавление

Полученный элемент можно добавить в DOM:

var messageElem = createMessage('Привет, Мир!', 'Я - элемент DOM!')

document.body.appendChild(messageElem);

Окончательный результат:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="alert.css" />
</head>
<body>

Сообщение добавлено из JavaScript.

<script>

function createMessage(title, body) {
  var container = document.createElement('div');

  container.innerHTML = '<div class="message"> \
    <h1>' + title + '</h1> \
    <div class="content">' + body + '</div> \
    <input class="ok" type="button" value="OK"> \
  </div>';

  return container.firstChild;
}

var messageElem = createMessage('Привет, Мир!', 'Я - элемент DOM!')

document.body.appendChild(messageElem);

</script>

</body>
</html>

Конечно, нам хотелось бы пойти дальше. Расположить сообщение не где-нибудь, а посередине окна. Все это вполне возможно, а как — читайте в следующих занятиях.

Текстовые узлы, тонкости использования

Как правило, при создании узлов и заполнении их используется innerHTML. Но текстовые узлы тоже имеют интересную область применения.

У них есть две особенности. Начнем с небольшого вопроса.

elem.appendChild(document.createTextNode(text))

elem.innerHTML = text

Ответили на вопрос выше? Даже если нет, то, поглядев в решение, вы легко увидите разницу.

Итак, отличий два:

1. При создании текстового узла createTextNode('<b>...</b>') любые специальные символы и теги в строке будут интерпретированы как текст. А innerHTML вставит их как HTML.
2. Во всех современных браузерах (кроме IE<8) создание и вставка текстового узла работает гораздо быстрее, чем присвоение HTML.

Итого

Методы для создания узлов:

• document.createElement(tag) — создает элемент
• document.createTextNode(value) — создает текстовый узел
• elem.cloneNode(deep) — клонирует элемент, если deep == true, то со всеми потомками.

Вставка и удаление узлов:

• parent.appendChild(elem)
• parent.insertBefore(elem, nextSibling)
• parent.removeChild(elem)
• parent.replaceChild(elem, currentElem)

Все эти методы возвращают elem.

Запомнить порядок аргументов очень просто: новый(вставляемый) элемент — всегда первый.

Методы для изменения DOM также описаны в спецификации DOM Level 1.

<div>Это</div>
<div>Все</div>
<div>Элементы DOM</div>

<script>
  var elem = document.body.children[0];

  function remove(elem) { /* ваш код */ }
*!*
  remove(elem);   // <-- функция должна удалить элемент
*/!*
</script>

function remove(elem) {
  return elem.parentNode ? elem.parentNode.removeChild(elem) : elem;
}

<div>Это</div>
<div>Элементы</div>

<script>
  var elem = document.createElement('div');
  elem.innerHTML = '<b>Новый</b>'

  function insertAfter(elem, refElem) { /* ваш код */ }

  var body = document.body;

  // вставить elem после первого элемента
  insertAfter(elem, body.firstChild); // <--- должно работать

  // вставить elem за последним элементом
  insertAfter(elem, body.lastChild);  // <--- должно работать 
  
</script>

function insertAfter(elem, refElem) {
    var parent = refElem.parentNode;
    var next = refElem.nextSibling;
    if (next) {
        return parent.insertBefore(elem, next);
    } else {
        return parent.appendChild(elem);
    }
}

function insertAfter(elem, refElem) {
    return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
}

<table>
  <tr>
    <td>Это</td><td>Все</td><td>Элементы DOM</td>
  </tr>
</table>


<script>
  function removeChildren(elem) { /* ваш код */ }

  removeChildren(document.body.children[0]); // очищает таблицу

</script>

function removeChildren(elem) {
  for(var k=0; k<elem.childNodes.length;k++) {
    elem.removeChild(elem.childNodes[k]);
  }
}

function removeChildren(elem) {
   while(elem.lastChild) {
       elem.removeChild(elem.lastChild);
   }
}

function removeChildren(elem) {
  elem.innerHTML = '';
}

function removeChildren(elem) {
  try {
    elem.innerHTML = '';
  } catch(e) {
    while(elem.firstChild) { 
      elem.removeChild(elem.firstChild);
    }
  }
}

<!DOCTYPE HTML>
<html>
<body>
<h1>Creation of the list</h1>

<script>
  var ul = document.createElement('ul')
  document.body.appendChild(ul)

  while (true) {
    var data = prompt("Enter the contents for the item", "")

    if (data === null) {
       break
    }

    var li = document.createElement('li')
    li.appendChild(document.createTextNode(data))
    ul.appendChild(li)
  }
</script>
     
</body>
</html>

var data = {
  "Рыбы":{
    "Форель":{},
    "Щука":{}
  },

  "Деревья":{
    "Хвойные":{
      "Лиственница":{},
      "Ель":{}
    },
    "Цветковые":{
      "Берёза":{},
      "Тополь":{}
    }
  }
};

var container = document.getElementById('container');
*!*
createTree(container, data); // создаёт 
*/!*