Быстрое создание (x)HTML элементов методами DOM.

Сайт от А до Б

Добавление новых элементов обычными методами DOM скучное занятие, которое может вызвать справедливое недовольство: для каждого элемента получаются очень многословные и многоэтажные конструкции. Если нужно сделать один-два элемента (например, DIV или P и т.п.) с текстом внутри, еще можно смириться с написанием большого количества практически одинаковых строк кода. Ведь, создание элемента, DOM-метод document.createElement() редко обходится без добавления этому элементу различных атрибутов. Размещение текста внутри элемента потребует вызвать еще и метод создания текстового узла document.createTextNode(), а также appendChild(). В-общем, с этим нельзя мириться, надо бороться, а как - будет показано далее на примере создания элемента DIV с текстом внутри двумя способами.

Обычный способ

function handle_button() {
    var parent = document.getElementById('myContainer');
    var newdiv = document.createElement('div');
    newdiv.className = 'myDivCSSClass';
    newdiv.id = 'myDivId';
    newdiv.style.width = '200px';
    newdiv.style.height = '250px';
    newdiv.style.background = '#3B9D00';
    newdiv.style.color = '#fff';
    var text = "текст текст текст текст текст текст текст текст";
    var textNode = document.createTextNode(text);
    newdiv.appendChild(textNode);
    parent.appendChild(newdiv);
}

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

Удобный способ создания новых элементов

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

function elem(name, attrs, style, text) {
    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));
    }
    return e;
}

В качестве примера вызова функции создадим такой же DIV, как в самом начале статьи, с теми же атрибутами:

function handle_button() {
    var parent = document.getElementById('myContainer');
    parent.appendChild(elem('div',
      {'class': 'myDivCSSClass', 'id': 'myDivId'},
      {'width': '200px', 'height': '250px', 'background': '#3B9D00', 'color': '#fff'}, 
      'текст текст текст текст текст текст текст текст'));
}