Справочник JavaScript > Объект Element > appendChild() > Метод appendChild() объекта element

Метод appendChild() объекта 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>

Результат:

Отредактируйте код, указанный выше, и нажмите кнопку "GO" для просмотра результата.