Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   createElement VS innerHTML (https://javascript.ru/forum/misc/49100-createelement-vs-innerhtml.html)

zhurchik 29.07.2014 13:45

createElement VS innerHTML
 
Здравствуйте Уважаемые форумчане.
Вкратце, у меня имеется ID а именно document.getElementById("container")
И мне нужно создать форму на лету с разными полями. Так вот, как лучше, создать форму и поля при помощи createElement и затем вставить их в ID container или же готовую форму вставить через document.getElementById("container").innerHTML = ""?

Какой способ будет работать быстрее и какой целесообразнее.
Заранее спасибо!

Octane 29.07.2014 13:54

innerHTML

Aetae 29.07.2014 14:06

Вообще, если форма большая - она должна прилетать с сервера. А если на пару элементов - то createElement удобнее.
В целом innerHTML работает быстрее, но если у вас возникла необходимость его использовать для чего-то большего, нежели вставки текста - скорее всего что-то вы делаете не так.

Маэстро 29.07.2014 14:24

По-моему разница в скорости тут несущественна. Потому как если форма нарисуется не за 100 ms, а за 200 ms - разницы Вы не заметите.
Существует несколько критериев при выборе того или иного подхода. В частности, когда надо сделать адаптивную верстку и обеспечить кроссбраузерность. Я сталкивался с ситуациями, когда в innerHTML не пропишешь все вариации, используя CSS, либо CSS становится монстрообразным. В этом случае лучше создавать форму поэлементно на javscript, используя проверки "if/else".
Все критерии описывать не буду. Скеажу лишь о том, что мне нравится. При использованиии var myobject = createElement() мы сразу получаем указатель на объекты (myobject), с которыми дальше можно работать, а при использовании innerHTML Вам потом придется каждый раз делать getElementById(). И если элементов на странице много, то как раз здесь и возможно будет заметно замедление работы.

tsigel 29.07.2014 14:38

Маэстро,
Если уж речь идет окакой-то большой форме с логикой создания то проще уж пользоваться шаблонизаторами. Например я пользую underscorejs, очень удобно.

BETEPAH 29.07.2014 14:44

Я соглашусь с Маэстро. Зачастую требуется на созданные элементы навешивать обработчики событий и при createElement это делать гораздо проще.
Добавлю только, что если форма большая, то имеет смысл вставлять фрагментом, а не поэлементно

MallSerg 29.07.2014 14:47

Складывается впечатление что это разные способы создания элементов/страницыHTML и у них есть свои достоинства и недостатки

Octane 29.07.2014 15:53

Вы прикалываетесь чтоли, какой createElement?! В 99% случаях поля ввода завернуты во всякие label и другие обертки, что их тоже все создавать? А если верстальщику захочется что-нибудь поменять?
Шаблонизатору скармливаются параметры, в ответ получают HTML-код, который вставляется через innerHTML...

zhurchik 29.07.2014 16:27

Aetae, У меня JS подключается динамически поэтому по факту и форма грузится с сервера.

Что Вы подразумеваете под тем, что если форма небольшая то и createElement'ом можно обойтись? Просто я не совсем понял разницу между большой и маленькой, по сути то принцип один.

zhurchik 29.07.2014 16:29

Маэстро,
Я понял Вашу мысль, спасибо!


Часовой пояс GMT +3, время: 16:36.