Добавление элемента в документ

Существуют две функции для добавления элементов в структуру 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(), который затем добавляется к родительскому объекту.