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

Помимо редактирования существующих элементов, DOM-интерфейс позволяет удалять или создавать новые элементы на странице. Это открывает широкие возможности при создании красивых динамических страниц. Ниже приведены методы для работы с документом в этом направлении.

appendChild()Добавляет новый дочерний узел, к элементу, в качестве последнего дочернего узла
cloneNode()Клонирует элемент
createComment()Создает комментарий с указанным текстом
createDocumentFragment()Создает пустой узел DocumentFragment
createElement()Создает узел Element
createTextNode()Создает текстовый узел
insertAdjacentHTML()позволяет вставлять произвольный HTML в любое место документа, в том числе и между узлами!
insertBefore()Вставляет новый дочерний узел перед указанным, существующим, дочерним узлом
remove()Удаляет элемент
removeChild()Удаляет дочерний узел из элемента
replaceChild()Заменяет дочерний узел в элементе
write()Записывает HTML выражения или код JavaScript в документ
writeln()То же, что write() , но добавляет символ новой строки после каждого оператора

appendChild()

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

Синтаксис

parent.appendChild(node)
parent - родительский узел.

Параметры

node
Ссылка на вставляемый узел.

Примеры

<ul id="myList">
  <li>Кофе</li>
  <li>Чай</li>
</ul>

<button onclick="myFunction()"> Попробуй appendChild() </button>

<script>
function myFunction() 
 { var node = document.createElement("LI");
   node.innerHTML = "Вода";
   document.getElementById("myList").appendChild(node); }
</script>

cloneNode()

Метод cloneNode создает копию узла, и возвращает клон.

Синтаксис

element.cloneNode(deep)

Параметры

deep
Булевое значение, которое указывает глубину клонирования. Если аргумент имеет значение true, то будет выполнено полное клонирование данного элемента - со всеми атрибутами и вложенными узлами. Если указать false, то элемент скопируется без дочерних узлов, но со всеми атрибутами. Данный аргумент необязательный, но его желательно указывать всегда, так как различные браузеры могут использовать разные значения по умолчанию.

Комментарии

Использование cloneNode может привести к появлению в документе элементов с одинаковым уникальным идентификатором id или именем name.

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

Примеры

<ul id="myList1"><li>Кофе</li><li>Чай</li></ul>
<ul id="myList2"><li>Вода</li><li>Молоко</li></ul>
<button onclick="myFunction()">Попробуй cloneNode() </button>

<script>
function myFunction() 
 { var itm = document.getElementById("myList2").lastChild;
   var cln = itm.cloneNode(true);
   document.getElementById("myList1").appendChild(cln); }
</script>

createComment()

Метод createComment создает комментарий-узел с указанным текстом.

Синтаксис

document.createComment( text )

Параметры

text
Текст для комментария узла

Примеры

<button onclick="myFunction()">Попробуй createComment() </button>
<p id="demo"></p>

<script>
function myFunction() {
  var c = document.createComment("Мой комментарий");
  document.body.appendChild(c);
  var x = document.getElementById("demo");
  x.innerHTML = '&lt;!--' + c.nodeValue + '-->'; }
</script>

createDocumentFragment()

Метод createDocumentFragment создает воображаемый объект Node, со всеми свойствами и методами объекта Node

Это особенный кросс-браузерный DOM-объект, который похож на обычный DOM-узел, но им не является.

Синтаксис

document.createDocumentFragment()

Описание, комментарии

var fragment = document.createDocumentFragment();

//В него можно добавлять другие узлы.
fragment.appendChild(node);

//Его можно клонировать:
fragment.cloneNode(true); // клонирование с подэлементами

У DocumentFragment нет обычных свойств DOM-узлов, таких как innerHTML, tagName и т.п. Это не узел.

Его «Фишка» заключается в том, что когда DocumentFragment вставляется в DOM – то он исчезает, а вместо него вставляются его дети. Это свойство является уникальной особенностью DocumentFragment.

Например, если добавить в него много LI, и потом вызвать ul.appendChild(fragment), то фрагмент растворится, и в DOM вставятся именно LI, причём в том же порядке, в котором были во фрагменте.

Примеры

<ul><li>Кофе</li><li>Чай</li></ul>

<button onclick="myFunction()"> Попробуй createDocumentFragment() </button>

<script>
function myFunction() {
  var d = document.createDocumentFragment();
  d.appendChild(document.getElementsByTagName("LI")[0]);
  d.childNodes[0].childNodes[0].nodeValue = "Молоко";
  document.getElementsByTagName("UL")[0].appendChild(d); }
</script>

createElement()

Метод createElement создаёт новый узел "элемент" с указанным тегом.

Синтаксис

document.createElement(tag)

Параметры

tag
Наименование тега

Комментарии

После создания "элемента" с указанным тегом его необходимо добавить на страницу.

Примеры

Создать <p>-элемент и добавить его в <div> элемент:

<style>
#myDIV {border: 1px solid black; margin: 10px; width:300px; padding: 10px;}
p {font-style: italic; color: #654321; margin-left:20px; border: 1px solid #cccccc;}
</style>

<div id="myDIV">DIV-элемент</div>

<button onclick="myFunction()"> Попробуй createElement() </button>

<script>
function myFunction() {
  var p = document.createElement("P");
  p.innerHTML = "Добавлен P-элемент";
  document.getElementById("myDIV").appendChild(p); }
</script>

createTextNode()

Метод createTextNode создает текстовый узел с указанным текстом.

Синтаксис

document.createTextNode(text)

Параметры

text
Текст текстового узла

Примеры

<button onclick="myFunction()"> Попробуй createTextNode() </button>

<script>
function myFunction() {
 var h = document.createElement("H1");
 var t = document.createTextNode("Hello World");
 h.appendChild(t);
 document.body.appendChild(h); }
</script>

insertAdjacentHTML()

Метод insertAdjacentHTML разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию.

Синтаксис

element.insertAdjacentHTML(position, text);

Параметры

text
Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.
position
Позиция, куда необходимо вставить код. Это место указывается относительно самого элемента и может иметь одно из следующих значений:
  • beforebegin - непосредственно перед открывающим тегом.
  • afterbegin - сразу после открывающего тега.
  • beforeend - непосредственно перед закрывающим тегом.
  • afterend - сразу после закрывающего тега.

<!--beforebegin--><p><!--afterbegin-->Hello<!--beforeend--></p><!--afterend-->

Для одинарного тега используются только beforebegin и afterend.

Комментарии

Данный метод не перезагружает имеющееся содержимое элемента, поэтому работает намного быстрее, чем использование свойства innerHTML.

Примеры

<style>
.red {color: #884422; font-weight: bold;}
</style>

<ul id="ul"><li>1</li><li>2</li><li>5</li></ul>

<button onclick="myFunction()"> Попробуй insertAdjacentHTML() </button>

<script>
function myFunction() {
 var ul = document.getElementById('ul');
 var li5 = ul.childNodes[2];
 var t = '<li class="red">3</li>';
 t += '<li class="red">4</li>';
 li5.insertAdjacentHTML("beforeBegin", t);  }
</script>

insertBefore()

Метод insertBefore вставляет новый дочерний узел перед указанным.

Синтаксис

parent.insertBefore( newNode, existNode )

Параметры

newNode
Ссылка на вставляемый узел.
existNode
Ссылка на элемент, перед которым необходимо вставить новый узел. Если аргумент равен null, то узел вставляется в конец родителя (то есть сработает, как appendChild).

Комментарии

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

Варианты применения:

// Вставка в самое начало родителя, то есть перед первым узлом
parent.insertBefore(element, parent.firstChild);

// Вставка в конец родителя, аналогично appendChild()
parent.insertBefore(element, null);

// Вставка перед конкретным элементом parentChild
parent.insertBefore(element, parentChild);

// Вставка после конкретного элемента parentChild
parent.insertBefore(element, parentChild.nextSibling);
// здесь происходит вставка перед тем узлом, который находится сразу за узлом parentChild

Метода insertAfter не существует, но можно воспользоваться функцией insertAfter(element, refElement), которая добавит element после узла refElement:

function insertAfter(element, refElement) 
  { return refElement.parentNode.insertBefore(element, refElement.nextSibling); }

Примеры

<ol id="list"><li>0</li><li>1</li><li>2</li></ol>

 <button onclick="myFunction()"> Попробуй insertBefore() </button>

<script>
function insertAfter(element, refElement) 
  { return refElement.parentNode.insertBefore(element, refElement.nextSibling); }
function myFunction() {
  var newLi = document.createElement('li');
  newLi.innerHTML = 'Привет, мир!';
  
  var list = document.getElementById('list');
  list.insertBefore(newLi, list.childNodes[1]);

  newLi = document.createElement('li');
  newLi.innerHTML = '<b style="font-size:20px; color:red">3</b>';
  insertAfter (newLi, list.lastChild );
}
</script>

remove()

Метод remove удаляет узел из дерева DOM.

Синтаксис

node.remove()

Комментарии

То, что элемент удален из DOM, еще не значит, что он удален совсем!
Он остался объектом и исчезнет только тогда, когда исчезнут все ссылки на него.

Совместимость с браузерами

23,0Нет23,07,010,0

Примеры

<div id="box">
   <p id="one">one</p>
   <div id="two">two</div>
</div>

 <button onclick="myFunction()"> Попробуй remove() </button>
 <p id='demo'></p>
<script>
if (document.documentElement.remove === undefined)
 { //Для IE
     Element.prototype.remove = function() {
      return this.parentNode.removeChild(this);
  } }
function myFunction() {
 var elem = document.querySelector("#one");
 elem.remove();
 x = document.querySelector("#demo");
 x.innerHTML = "Исчез блок #one:<br>Но сам объект еще жив: "+elem;
}
</script>

removeChild()

Метод removeChild удаляет дочерний узел из элемента.

Синтаксис

parent.removeChild(node)

Параметры

node
Ссылка на удаляемый узел.

Комментарии

Из названия видно, что данный метод удаляет дочерний узел. То есть метод removeChild необходимо вызывать на том элементе, который является родительским для удаляемого узла.

Метод removeChild возвращает ссылку на удалённый объект. С этим узлом впоследствии можно работать.

Примеры

<h1 id="msg">Это сообщение будет удалено после клика на кнопку</h1>

 <button onclick="myFunction()"> Попробуй removeChild() </button>
 <p id='demo'></p>

<script>
function myFunction() {
 var elem = document.querySelector("#msg");
 document.body.removeChild(elem);
 
 x = document.querySelector("#demo");
 x.innerHTML = "Сообщение исчезло, но сам объект еще жив: "+elem; }
</script>

Используем функцию removeChildren для удаления всех потомков:

<table id="table" style="border: 2px solid #555511; padding: 10px;">
  <tr>
    <td> Это </td><td> Все </td><td>Элементы DOM</td>
  </tr>
</table>
<ul id="ul"  style="border: 2px solid #115555; padding: 20px;">
  <li>Вася</li>
  <li>Петя</li>
  <li>Маша</li>
  <li>Даша</li>
</ul>

 <button onclick="myFunction()"> Попробуй removeChildren() </button>
 
<script>
function removeChildren(elem) {
  try {
    elem.innerHTML = '';
  } catch (e) { //для IE 8-
    while (elem.firstChild) {
      elem.removeChild(elem.firstChild);
    }
  }
}
function myFunction() {
  removeChildren( document.getElementById('table') ); // очищает таблицу
  removeChildren( document.getElementById('ul') ); // очищает список
}
</script>

replaceChild()

Метод replaceChild заменяет дочерний узел в элементе.

Метод совмещает в себе сразу два действия: удаляет один узел и вставляет на его место новый.

Синтаксис

parent.replaceChild( newNode, oldNode )

Параметры

newNode
Ссылка на вставляемый узел.
oldNode
Ссылка на удаляемый (замещаемый) узел.

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

Метод возвращает ссылку на удалённый узел.

Примеры

<ul id="ol">
  <li> 1 </li>
  <li id="n11"> 11 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li id="n2"> 2 </li>
</ol>

 <button onclick="myFunction()"> Попробуй replaceChild() </button>
 
<script>
function myFunction() {
var ol=document.getElementById('ol');
ol.replaceChild(document.getElementById('n2'),document.getElementById('n11'));
}
</script>

write()

Метод write позволяет вывести на страницу переданный в него текст.

Синтаксис

document.write (text1,text2,...,texn)

Параметры

text1,text2,...,textn

Текст который будет выведен на страницу.

Комментарии

Метод write работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.

Примеры

//Выведем текст на страницу
document.write('Я текст который будет выведен на страницу',' Еще текст',' Другой текст');
//Выведем на страницу абзац произвольного текст
document.write('<p>Я абзац выведенный с помощью <strong>write</strong>()</p>');
//Теперь выведем на страницу абзац курсивного текста
document.write('<p><i>Я абзац выведенный с помощью    \
   <b style="font-size:24px; color: #663311">write</b>()</i></p>');

writeln()

Метод writeln позволяет вывести на страницу переданный в него текст.

После выведенного текста будет вставлен символ перевода строки.

Синтаксис

document.writeln (text1,text2,...,texn)

Параметры

text1,text2,...,textn

Текст который будет выведен на страницу.

Комментарии

Метод writeln работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.

Примеры

<p>Для того, чтобы браузер не игнорировал символ перевода строки 
заключим вывод метода <b>writeln</b> в тэг &lt;pre>:</p>
<pre>
<script type='text/javascript'>
document.writeln('Я текст который будет выведен на страницу');
document.writeln('Еще текст');
document.writeln('И еще текст');
</script>
</pre>
<hr />
<p>Сравним действия метода <b>writeln</b> с действием метода <b>write</b>:</p>
<pre>
<script type='text/javascript'>
document.write('Я текст который будет выведен на страницу');
document.write('Еще текст');
document.write('И еще текст');
</script>
</pre>

Справочник JavaScript