Snart Dec 10 2007 at 22:22

JavaScript: создание DOM фрагментов

2 min

20K

Website development*

+33

Comments 64

UFO landed and left these words here

Snart Dec 10 2007 at 22:32

Спасибо, Вы по ходу первый читатель, т. к. кабракатонул сразу же через 5 сек после добавления статьи :)

diamant Dec 11 2007 at 06:46

это хаброкатохабробот

khim Dec 10 2007 at 22:40

Красиво, конешна, но насколько оно применимо в реальной жизни в свете вот этого ?

Snart Dec 10 2007 at 23:12

ИМХО: В реальной жизни очень даже применимо, InnerHTML конечно же быстрее работает чем W3C DOM, ничего тут не поделаешь.

Я лично решал довольно таки простые задачи и кода генерировать приходилось немного, с проблемами производительности не сталкивался

Snart Dec 10 2007 at 23:15

Я имею ввиду с проблемами производительности при генерации документа средствами javascript не сталкивался :)

khim Dec 11 2007 at 00:02

С ними сталкивались посетители сайтов. Попробуйте как-нибудь ваше творение на машинке с 500-700MHz P!!!. Такие машинки ещё в строю!

ashofthedream Dec 11 2007 at 00:27

а это уже их проблемы. Наверное глупо говорить "у меня че-та тама тормозит", когда сидишь на железе из прошлого века.

vadim_sk Dec 11 2007 at 06:54

Я как-то работал в крупной фирме (ок. 1000 сотрудников, в 10-ке по России) в сфере торговле радиоэлектронными компонентами. Так вот. Регулярные заказы на несколько десятков тысяч евро делал дяденька на 200 MMX(!!!). Ну не у всех заводов еще комп. парк обновлен:)

Кроме того, не стоит забывать про мобильные устройства, которые еще проигрывают в производительности десктопным компам.

gro Dec 11 2007 at 07:47

У дяденьки на 200MMX небось какой-нибудь IE3, в котором вообще ничего не работает.
На средне-устаревшей тачке (от 1ГГц) разница между innerHTML/DOM будет заметна только при частой перерисовке очень больших объемов.

ashofthedream Dec 10 2007 at 23:20

innerHTML работает быстрее чем DOM. Впервые об этом слышу.

Snart Dec 10 2007 at 23:26

Читай ссылку выше, я тоже об этом сегодня узнал :)
p.s.: Опубликовал статью получил полезный скилл про innerHTML

ashofthedream Dec 10 2007 at 23:31

Почитал. С домом привычнее, и если грамотно писать - приятнее.

Snart Dec 10 2007 at 23:17

Из этого следует что лучше делать все что можно через InnerHTML? Или у него есть свои недостатки перед DOM методами?

akral Dec 10 2007 at 23:31

innerHTML не существует в XHTML.

khim Dec 11 2007 at 00:00

У него читабельность хромает. Но он быстрее. В нормальных браузерах (Firefox/Opera/Safari) разница не так велика и может компенсироваться тем, что потом придётся в отдельный проход находить подэлементы (типа переменной td в последнем примере), но в MS IE разница просто катастрофична: в 30 и более раз! Причём самое ужасное - MS IE 6 и MS IE 7 в этом отношении хуже, чем MS IE 5, так что облегчения в будущем не предвидится...

BaBL Dec 11 2007 at 03:16

я стараюсь всегда использовать innerHTML, как-то он мне больше нравится, единственная ощутимая проблема с ним в том, что при сабмите формы обычным методом, элементы, добавленные через innerHTML не передаются с формой. Поэтому в этом случае лучше использовать все таки DOM, либо, как делаю я, отсылать формы AJAX'ом, ибо JS эти элементы видит.

MOVe Dec 11 2007 at 06:34

При создании элементов средствами innerHTML - остаётся неизвестным указатель на созданный объект. Для этого придётся прибегать к поиску его в документе.
А средствами DOM мы имеем указатель сразу после создания элемента — var table=document.createElement('table');

IgorStepin Dec 12 2007 at 12:37

К плюсам innerHTML относится не только скорость, но и простота для разработчика. innerHTML одинаково поддерживают все браузеры. С DOM`ом же у IE (особенно 6ой версии) есть проблемы (например, вставка input type="radio"). Подробнее с ошибками IE можно ознакомиться на Channel9 wiki.

Я вижу только 2 минуса innerHTML:
1. он отсутствует в стандартах. Для меня полностью компенсируется одинаковой поддержкой во всех известных мне графических интернет-браузерах (IE,FF,Opera,Safari,Konqueror).
2. нельзя сразу получить ссылку на созданный элемент. На практике мне несколько раз надо было это сделать. Брал либо через document.getElementById, либо через DOM детей от элемента в который вставляли.

Непрактичность DOM показывает кол-во функций, которые по сути стремятся приблизиться к innerHTML, но используя DOM. Тут, как мне кажется, надо менять стандарт, а не заниматься самоистязанием. Тем более что все основные браузеры уже поддерживают эту функциональность.

Для себя при необходимости вставки нетривиальных DOM-фрагментов я использую innerHTML и текстовые шаблоны, где значения параметрам вида %NAME% подставляется простой заменой подстроки в строке.

xiWera Dec 24 2007 at 14:49

innerHTML глючит в ослике, очень часто нельзя потом найти по id новоиспеченный домнод, вставленный через innerHTML

grey_kristy Dec 11 2007 at 14:35

да, сильно. Особенно радует IE6 - разница почти в 20(!) раз.
Выходит не зря я пользуюсь innerHTML всюду где можно

MTonly Dec 11 2007 at 01:14

Только, ради бога, не параграф, а абзац. Спасибо.

Snart Dec 11 2007 at 09:44

Спасибо, исправил :)

Wonder Dec 11 2007 at 05:07

С помощью jQuery, например, подобное очень просто реализуется. Кроме того в библиотеке море других полезностей и удобств, ради которых не жалко подключить 20-килобайт кода, а не писать кучу своих функций, реализующих то, что уже есть реализованное.

krylatij Dec 11 2007 at 07:35

только написать хотел :)

terloger Dec 11 2007 at 07:36

речь то шла не о библиотеке, а о реализации DOM helper-а и только оного, иначе можно приводить до сотни разных библиотек, включающих в себя работу с DOM. Наверное есть реализации, в которых работа с DOM происходит удобнее и проще, чем в jQuery.

CGS Dec 11 2007 at 09:17

Мне кажеться проще чем в jQuery уже некуда :)

terloger Dec 11 2007 at 09:20

может только кажется? Вроде встречал на просторах Ajaxian-а и поэлегантнее варианты.

CGS Dec 11 2007 at 13:55

Но поэлегантнее, не всегда проще или если угодно понятней.

terloger Dec 11 2007 at 14:00

нет смысла продолжать трэд, своим комментарием я хотел сказать, что кроме jQuery существует миллион с хвостиком разных библиотек и приблуд «все в одном», но когда нужно только ОДНО (в данном случае вставка в DOM дерево) нет смысла упоминать эти комбайны.

GolDen Jan 21 2008 at 14:21

А вот и не понятно, как с помощью jQuery можно реализовать те примеры, которые приводит автор. Не просто через вставку HTML, типа:

$('<div id="new" style="background:#fff""><p align="center">вступление : <a href="http://ua.fishki.net/picso/kotdavinchi.jpg">картинка</a> : конец</p></div>').appendTo('#destination');

- потому что так, семантика смешивается с контентом. А чтобы именно через создание DOM модели, как это сделано у автора?

Wonder Jan 22 2008 at 03:18

$( "<div>" );

А теперь можно к нему добавлять аттрибуты, вставить контент и т.д.

GolDen Jan 22 2008 at 08:02

Верно, после твоего ответа решил поиграться и написать все примеры автора через jQuery, чтобы было с чем сравнивать, итак, что у меня получилось:

Например, создаём абзац текста:

$('<p>').append('Farewell, Love!').appendTo('#destination');

Или div с параграфом и ссылкой внутри него:

$('<div>')
    .attr('id','new')
    .css('background','#fff')
    .append(
        $('<p>')
            .attr('align','center')
            .append('вступление :')
            .append(
                $('<a>')
                    .attr('href','http://ua.fishki.net/picso/kotdavinchi.jpg')
                    .append('картинка')
            )
            .append(': конец')
    ).appendTo('#destination');

Или вот, делаем таблицу:

$('<table>').attr({id:'ugly',cols:3}).append(
        $('<tbody>')
            .append(
                $('<tr>')
                    .append(
                        $('<td>').attr('width','10%').append('hello')
                    )
                    .append(
                        $('<td>').addClass('special2').append('everywhere')
                    )
            )
    ).appendTo('#destination');

На мой взгляд ,смотрится не хуже, а для каких-то моментов наверняка и более надежно, с точки зрения кросс-браузерности.

Wonder Jan 22 2008 at 08:25

О том и речь ,)

StranNIC Dec 11 2007 at 05:37

На сколько я понимаю, то при вставке кода через innerHTML мы не сможем потом даже сделать элементарный getelementbyid... или я чтото путаю... так что считаю вышеприведенный метод вполне применимым на практике

LighteR Dec 11 2007 at 05:49

getelementbyid вполне работает при использовании innerHTML

StranNIC Dec 11 2007 at 05:56

ну значит я что то напуал сказав это...

Bonch Dec 11 2007 at 07:28

Хм. Такие вещи уже давно есть во многих фреймворках, в mootools например.
Так что не надо благодарить за идею Ивана Курманова, вот.

Snart Dec 11 2007 at 09:46

Он эту функцию написал

DMakeev Dec 11 2007 at 07:52

Форматирование кода полезная штука, чесслово.

zhuk Dec 11 2007 at 11:33

Согласен.

nuclon Dec 11 2007 at 08:10

совсем не ново.

anycolor Dec 11 2007 at 08:12

То, что это не ново - видно по линку - http://ahinea.com/2006/04/14/javascript-…, который кричит, что это было еще в 2006 году в апреле.

alexbyk Dec 11 2007 at 08:18

Шото я не вьехал что вы тут обсуждаете. Производительность каждый может сам проверить что работает быстрее у себя на компах каждый. Сам пост - тоже не врубился что он за америку открывает.

.class - атрибут не работает наверное не почему-то, а потому что его нужно называть .className

Snart Dec 11 2007 at 10:01

А почему, скажите мне пожалуйста, мой пост обязательно должен открывать Америку?
Я просто написал о вещи, которой сам пользуюсь, это вовсе не тайна что статья с этой функцией написана еще в 2006 году, и вполне возможно, что кто-то сочтет приемлимым и даже очень удобным использование такой функции. Почему бы нет?
Мне показалось, что это интересная для Хабра статья, именно такая, какими они и должны здесь быть. О полезной, не банальной и не широко известной вещи, вроде-бы не боян, а если здесь сидят одни гуру джаваскрипта, то зачем вообще что-то читать?
Пишите лучшие статьи, я с удовольствием почитаю! :)

alexbyk Dec 11 2007 at 12:45

Да вообще-то я собирался написать очень интересный и поучительный пост, но какой-то Карма-контроль меняне пускает ничего писать

Snart Dec 11 2007 at 15:29

ЛОЛ :))))
Надеюсь, в ближайшее время пустит

Floyd Dec 11 2007 at 10:09

По названию статьи подумал, что тут будет обсуждаться document.createDocumentFragment - полезная штука, подглючивающая в ФФ.

hazy Dec 11 2007 at 10:37

бррр... велосипед...

caston Dec 11 2007 at 11:23

prototype:

The old way
var a = document.createElement('a');
a.setAttribute('class', 'foo');
a.setAttribute('href', '/foo.html');
a.appendChild(document.createTextNode("Next page"));

The new way
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next page");

Mourner Dec 11 2007 at 13:49

Спасибо за статью! Несколько замечаний:

setAttribute с некоторыми атрибутами глючит в IE, поэтому следует вместо этого использовать просто el[i] = attributes[i].

class не работает, потому что это в JavaScript зарезервированное слово. Вместо него можно писать 'class' (в кавычках) или className.

И, кстати, за идею стоит благодарить Томаса Фухса, создателя библиотеки Script.aculo.us (в последствии этот функционал перекочивал в сам Prototype).

И еще. Хорошо бы окружить куски кода тагом pre, чтобы идентацию сохранить, а то так малочитабельно.

Snart Dec 11 2007 at 15:31

Спасибо, совсем забыл про pre

Mourner Dec 11 2007 at 17:44

Так почему не поправишь? :)

hlomzik Dec 11 2007 at 22:35

насколько я помню, это только id (не знаю уж причины к сожалению), class (так как используется для других целей, а для указания класса нужен className) и style (некроссбраузерно и по моему удобнее делать через хеш стилей)

Mourner Dec 11 2007 at 23:07

Нет, id нормально работает. Не работает еще for по понятной причине - нужно htmlFor.

А вот style действительно приходится отдельно в цикле разбирать внутри той функции, передавая его как хеш.

hlomzik Dec 11 2007 at 23:16

про id да, наврал
а вот for тоже хорошо работает в setAttribute
проблема в том, что если не заключать for в кавычки, его нельзя использовать как ключ хэша, больше этот атрибут мне проблем не доставлял )

Mourner Dec 11 2007 at 23:20

setAttribute вроде и с некоторыми другими словами глючит в IE, надёжнее всё-таки напрямую по-моему. :)

no_smoking Sep 14 2008 at 16:52

ага например colspan не срабатывает через setAttribute

Over Dec 11 2007 at 21:35

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

hlomzik Dec 11 2007 at 22:33

с хорошими отступами подобное создание дерева информативнее, удобнее и правильнее =)

Brockb Dec 11 2007 at 21:58

Статья полезная, спасибо, хотя я согласен с мнением читателей: это уже организовано в JS библиотеках, как JQuery или mootools.

Но не в этом суть!
Я бы хотел напомнить что есть раздел JavaScript и мне кажется, что логичнее было бы разместить эту статью туда... Но хозяин - барин :)

А так, хаброчеловеки, обращайте внимание на коллективные блоги, а то есть некоторая неразбериха между блогами "Ajax", "Web-разработка" и "JavaScript" (дублирующиеся темы новостей Ext тому пример).

Спасибо!

hlomzik Dec 11 2007 at 22:32

Подобную вещь сделал давно и активно пользуюсь

Украду:
- переменное кол-во аргументов; я "детей" указывал в массиве третьим параметром

Вам посоветую:
- стили тоже может быть стоит в массив загонять? я так делаю - удобнее и практичнее
- class, for (label for="..."), как уже выше сказали, надо заключать в кавычки/апострофы - это правильнее, к тому же это позволит убрать toLowerCase =)
- насколько помню (сейчас лениво проверять) id надо тоже отдельно обрабатывать - не через setAttribute, а прямым назначением
- у меня ф-ия называется node, имхо более соответствует

hlomzik Dec 11 2007 at 23:14

про id наврал, дико извиняюсь, setAttribute хорошо с ним дружит

UFO landed and left these words here