Добавление новых узлов в документ

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

insertBefore(newChild, referenceChild);

appendChild(newChild).

Оба эти метода добавляют новый узел newChild к существующему в документе, appendChild() добавляет новый узел после всех дочерних, insertBefore() добавляет новый узел перед дочерним узлом, указанным
в параметре referenceChild.

Кроме этого, существует метод для копирования существующего узла. В качестве параметра можно указать, должны ли копироваться все дочерние узлы, по умолчанию значение параметра false:

cloneNode(deepСlone).

Удаление и замена узлов в документе

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

currentNode.removeChild(child) – в качестве параметра принимает узел для удаления.

currentNode.replaceChild(newChild, oldChild) – заменяет узел oldChild на newChild.

Оба метода должны принадлежать узлу currentNode, у которого удаляются или заменяются дочерние узлы.

Использование каскадных таблиц стилей в DOM

Каждый узел DOM имеет объект style, который описывает применяемые стили. Например, можно изменить цвет шрифта тега <p>, document.getElementById("samplePtag").style.color = «red».

Более подробно обо всех свойствах можно узнать в спецификации CSS (http://www.w3.org/Style/CSS/#specs).

Свойство элемента innerHTML и outerHTML

Кроме методов, описанных выше, для изменения структуры документа испоьзуется более простой метод, основанный на использовании свойств элементов DOM – innerHTML и outerHTML. innerHTML содержит HTML-код между открывающим и закрывающим тегом. С помощью этого свойства можно работать с кодом внутри тега, как со строкой – считывать и записывать. Однако для следующей группы элементов это свойство доступно только для чтения: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

По определению свойство innerHTML не существует у элементов, которые не имеют одновременно открывающего и закрывающего тега (например <br>).

Отличие свойства outerHTML в том, что это свойство включает в себя HTML-код между открывающим и закрывающим тегом, а также открывающий
и закрывающий тег этого элемента.

Для следующих элементов это свойство доступно только при чтении: CAPTION, COL, COLGROUP, FRAMESET, HTML, TBODY, TD, TFOOT, TH, THEAD, TR.

Свойство outerHTML доступно для записи только после того, как весь документ будет загружен, т.е. произойдет событие window.onload.

Ниже приведен пример использования свойств innerHTML и outerHTML: