appendChild()

Поддержка браузерами

Описание

Метод appendChild() добавляет узел в качестве последнего дочернего узла в указанный родительский элемент.

Если узел, который добавляется в качестве последнего дочернего узла текущего элемента, уже имеется в HTML-документе и расположен в другом родительском элементе, то он удаляется из своего текущего родительского элемента и добавляется в качестве последнего дочернего узла в новый родительский элемент. Проще говоря узел может быть перемещён с его текущей позиции в другое место.

Если добавляемый узел находится в том же родителе, к которому он добавляется, то он будет просто перемещён с текущего положения в конец родителя.

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

Синтаксис

elem.appendChild(узел);

elem - родительский элемент, в который будет добавлен узел, передаваемый в качестве аргумента.

Аргументы

узел: элемент, который будет добавлен в конец списка дочерних элементов указанного родителя.

Возвращаемое значение

Возвращает ссылку на добавленный узел (element).

Пример

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
</head>
<body>

  <ul id="list1"><li>Кофе</li><li>Чай</li></ul>
  <ul id="list2"><li>Вода</li><li id="item2">Молоко</li></ul>

  <p>Нажмите кнопку, чтобы переместить последний элемент списка</p>
  <button onclick="foo()">Переместить</button>

  <p>Нажмите кнопку, чтобы добавить новый элемент в список</p>
  <button onclick="bar()">Добавить</button>

  <script>
    var i = 1;

    function foo() {
      var elem = document.getElementById("list2").lastChild;
      document.getElementById("list1").appendChild(elem);
    }

    function bar() {
      var elem = document.createElement("li");
      elem.innerHTML = "Water" + i;
      document.getElementById("list2").appendChild(elem);
      i++;
    }
  </script>

</body>
</html>

Попробовать »