Существуют две функции для добавления элементов в структуру DOM. Это appendChild() и insertBefore(). Первая добавляет к родительскому элементу новый дочерний элемент, который будет вставлен последним:
// parentElem - родительский элемент // newElem - добавляемый элемент (будет добавлен последним в списке дочерних) parentElem.appendChild(newElem);
Если нужно добавить к родительскому элементу дочерний, но не в конце списка, а в начале или в середине, то нужно использовать insertBefore(). Эта функция позволяет добавлять новые элементы перед следующим дочерним элементом:
// parentElem - родительский объект // newElem - добавляемый объект // beforeElem - элемент, перед которым нужно вставить объект parentElem.insertBefore( newElem, beforeElem );
Можно также использовать следующие вспомогательные функции, которые позволяют добавлять как новые элементы так и текстовые данные:
function append( parent, elem ){
var node = elem && elem.constructor == String ?
document.createTextNode(elem) : elem;
parent.appendChild(node);
}
function before( parent, before, elem) {
var node = elem && elem.constructor == String ?
document.createTextNode(elem) : elem;
parent.insertBefore( node, before );
}
Здесь, в обоих функциях осуществляется проверка типа добавляемого элемента. Если это строка, то создается новый элемент при помощи функции createTextNode(), который затем добавляется к родительскому объекту.
