Быстрое создание (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'}, 
      'текст текст текст текст текст текст текст текст'));
}

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

Это
, в котором надо разместить новый элемент.

Сделать новый элемент!

XML Matters: Beyond the DOM



Много комментариев (26) к “Быстрое создание (x)HTML элементов методами DOM.”

  1. Maxim :

    Поищите функцию domEl — еще удобнее


    2006-06-30 at 10:34 pm
  2. Elf :

    Любой программист (если он программист) давно должен был обзавестись собственной библиотечкой, автоматизирующей сии безобразия. Это ж закон – любой код, повторенный дважды, должен быть вынесен в функцию :-)


    2006-07-01 at 4:09 am
  3. zed_0xff :


    if (style) {
    for (key in style) {
    e.style[key] = style[key];
    }
    }

    а почему не:


    if (style) {
    e.style = style;
    }

    ?


    2006-07-01 at 7:07 am
  4. AKS :

    2zed_0xff
    Вы бы сначала посмотрели, что из этого получится, а уж потом бы писали…


    2006-07-01 at 7:21 am
  5. Vitaly Harisov :

    Я использую innerHTML, когда это возможно. Код намного короче и понятнее получается.


    2006-07-01 at 12:27 pm
  6. Евгений ?ванов :

    а лучше вот так
    if (attrs) {
    for (key in attrs) e.setAttribute(key, attrs[key]);
    }
    и называть атрибуты сразу.


    2006-07-01 at 2:00 pm
  7. Евгений ?ванов :

    Хотя вспомнил, что id и className нельзя по setAttribute ставить….


    2006-07-01 at 2:02 pm
  8. Евгений ?ванов :

    Насчёт innerHTML соглашусь. ?м очень удобно пользоваться, благо поддерживают все браузеры. и Работает быстрее, чем createElement, особенно на таблицах.


    2006-07-01 at 2:04 pm
  9. Андрейка :

    > Насчёт innerHTML соглашусь. ?м очень удобно пользоваться, благо поддерживают все браузеры. и Работает быстрее, чем createElement, особенно на таблицах.

    … и невалидный код туда проще запихнуть. ? потом отлаживать часами, ищя, почему же разъехалось тоже проще…

    Вообщем, innerHTML — зачастую зло.


    2006-07-01 at 5:06 pm
  10. Баранов Андрей :

    As there is no public specification for this property, implementations differ widely. For example, when text is entered into a text input, IE will change the value attribute of the input’s innerHTML property but Gecko browsers do not.

    It should never be used to write parts of a table—W3C DOM methods should be used for that—though it can be used to write an entire table or the contents of a cell.

    http://developer.mozilla.org/en/docs/DOM:element.innerHTML

    …иными словами, innerHTML конечно можно использовать для создания примитивного статического контента, если не планируется в дальнейшем широкое применение к нему методов DOM.


    2006-07-01 at 5:40 pm
  11. Баранов Андрей :

    Elf, по первому предложению: кто-то, возможно, еще только начинает обзаводиться собственной библиотечкой.
    По второму – неоспоримый факт! :)

    Кстати, в коде скрипта из источника (по ссылке в конце статьи, см. выше) были ошибки (автор уже их исправил, но это говорит о том, что даже копируя готовый код, надо работать не только руками, но и головой).


    2006-07-01 at 5:59 pm
  12. Vitaly Harisov :

    > It should never be used to write parts of a table

    Конечно, never, MSIE не позволяет сделать это.

    > …иными словами, innerHTML конечно можно использовать для создания примитивного статического контента, если не планируется в дальнейшем широкое применение к нему методов DOM.

    Вывод не понятен. После добавления частей DOM’а через innerHTML получаем такой же DOM, как и при использовании createElement. А вот использовать innerHTML в AJAX намного проще, выплёвывай себе куски HTML с сервера и всё.


    2006-07-01 at 10:50 pm
  13. Баранов Андрей :

    Vitaly Harisov – писал в спешке, теперь и сам уже не пойму о чем… :)


    2006-07-04 at 10:18 am
  14. codework :

    2Elf: Спорное утверждение, иногда лучше повторить код несколько раз, чем выносить его в функцию, например там где важно быстродействие, или когда этот код состоит из 2-3 строк. Хотя есть куча примеров где наоборот не надо выносить повторяющийся код в отдельную функцию.


    2006-07-04 at 11:10 am
  15. WingedFox :

    Предлагаю ещё один вариант (имхо – самый удобный) :
    http://forum.dklab.ru/js/advises/DocumentCreateelementext.html


    2006-07-21 at 11:37 am
  16. DROOPY :

    >… и невалидный код туда проще запихнуть. ? потом отлаживать >часами, ищя, почему же разъехалось тоже проще…

    >Вообщем, innerHTML — зачастую зло.
    Да никакое это не зло.
    А для отладки существует “Developer Toolbar” для IE и “?спектор DOM” для FireFox


    2006-07-31 at 11:33 pm
  17. flash-vkv :

    вот вам код им все сказано

    var node = document.createElement("tr");
    node.innerHTML = '1 ';
    alert(node.innerHTML); // собшение: 1 


    2006-10-16 at 7:55 am
  18. flash-vkv :

    чтота странно блок code работает должно было вывести след
    var node = document.createElement(”tr”);
    node.innerHTML = ‘1 ’;
    alert(node.innerHTML); // собшение: 1 


    2006-10-16 at 7:58 am
  19. flash-vkv :

    так и не получилось вставить строчку
    node.innerHTML = .’..1.&.n.b.s.p.;..’.;.


    2006-10-16 at 8:00 am
  20. Alexander :

    простое человеческое спасибо.


    2006-11-06 at 7:11 pm
  21. Дмитрий :

    Спасибо за информацию ))
    Правда не совсем до конца разобрался..


    2007-07-05 at 7:12 pm
  22. Frog007 :

    А я использую библиотеку MochiKit. ? там есть возможность писать так:
    var newDiv = DIV({style:”border:solid 1px black”}, [childNode]);

    а потом можно добавлять этот элемент в DOM.


    2007-09-02 at 7:36 pm
  23. Яшин Дмитрий :

    Статья про оптимизацию яваскрипта при добавлении элементов DOM в документ. Читать всем! http://kpumuk.info/javascript/javascript-optimization-part-1-adding-dom-elements-to-document/lang/ru/


    2007-10-22 at 11:59 pm
  24. Desc :

    А как сделать чтобы добавлялось новые сверху?


    2008-02-23 at 12:05 am
  25. Баранов Андрей :

    parent.insertBefore(new, any);

    parent – родительский контейнер
    new – новый элемент
    any – тот, перед которым надо вставить(внутри родительского)


    2008-02-23 at 12:26 am
  26. Алексей :

    столкнулся с проблемой
    если в text присутствуют хтмл-тэги, то они не работают :(
    отображаются как обычный текст
    кто подскажет как исправить?


    2008-09-07 at 11:29 am