Если вам нужно создать HTML элемент, и вы не знаете, как это реализовать, то вы обратились по адресу. В этой статье будет не только рассмотрен пример создания элемента, но и написана универсальная функция, с помощью которой вы сможете создать новый элемент, добавить ему различные атрибуты, заполнить текстом.

Но, для начало начнем с простого. В создании нового элемента мы будим использовать методы объекта DOM, а именно:

* document.createElement(param) - этот метод, служит не посредственно для создания элемента. В качестве параметра, принимает название создаваемого элемента.Возвращает ссылку на созданный элемент.

Пример:

document.createElement(‘div’); // создаст элемент div.

* document.appendChild(param) – этот метод, служит для добавления элемента в HTML код. В качестве параметра принимает ссылку на созданный элемент;

Пример:

var parent = document.getElementsByTagName('BODY')[0]; //получаем ссылку на элемент body

var elem = document.createElement(‘div’);// создаст элемент div

parent.appendChild(elem);// добавляет элемент,где parent это ссылка куда будет добавлен наш элемент, в данном случае – это тело body;

* document.createTextNode() - метод служит для, размещение текста внутри элемента.

Пример создания элемента.

function createElem() {

var parent = document.getElementsByTagName('BODY')[0];

var newP = document.createElement('p');

newP.className = 'elemClass';

newP.id = 'myPId';

newP.style.width = '100px';

newP.style.height = '300px';

newP.style.background = '#c5c5c5';

newP.style.color = '#000';

var text = "текст для вставки";

var textNode = document.createTextNode(text);

newP.appendChild(textNode);

parent.appendChild(newP);

}

В функции createElem переменная parent является ссылкой на элемент(body), в котором будет размещен новый элемент. Затем создается новый элемент P, к нему добавляется атрибуты id,class,style,а также задаются значение этих атрибутов. Затем создается текстовый узел, с добавлением его в наш новый элемент. После всего этого происходит добавления самого элемента в тело body. Чтобы сделать больного числа новых элементов придется изрядно потрудиться, т.к. возможно, потребуется разместить их в разных местах веб-страницы, т.е. присоединить к разным элементам.

Пример создания элемента с помощью универсальной функции.

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

function createElement(name, attrs, style, text,past_id,position,changed) {

var parent = document.getElementsByTagName('BODY')[0];

var e = document.createElement(name);

if (attrs) {

for (key in attrs) {

if (key == 'class') {

e.className = attrs[key];

} else if (key == 'id') {

e.id = attrs[key];

} else {

e.setAttribute(key, attrs[key]);

}

}

}

if (style) {

for (key in style) {

e.style[key] = style[key];

}

}

if (text) {

e.appendChild(document.createTextNode(text));

}

parent.appendChild(e);

if(past_id){

var old_elem = document.getElementById(past_id);

if(position=='before'){

parent.insertBefore(e,old_elem)

}else if(position=='after'){

insertAfter(parent,e,old_elem);

}

if(changed!='' && changed==true){

parent.removeChild(old_elem);

}

}

}

Параметры:

• name – название элемента;

• attrs – атрибуты создаваемого элемента;

• style – стили создаваемого элемента;

• text – вставляемый текс;

• past_id – id элемента, рядом с которым будет располагаться наш элемент;

• position - может принимать два значения before,after;

• changed – флаг, который принимает два значения true или false.Если этот параметр установлен в true, то произойдет замена старого элемента на новый;

В качестве примера, создадим элемент DIV с атрибутами, и заменим старый элемент на ново созданный.

createElement('div',

{'class': 'myDivCSSClass', 'id': 'myDivId','align':'center'},

{'width': '200px', 'height': '250px', 'background': '#3B9D00', 'color': '#fff'},

'here is my text',

'test',

'before',

1);