DOM vs. innerHTML

[ruslan_mart]

Всем добрый день/вечер/ночь/утро.

Возник такой вопрос: как лучше добавлять элемены? Через createElement или innerHTML?

Например, у меня есть некая моя мини-библиотека, в ней я создаю элементы так:

var div = mk.create('div', {className: 'myClass', tite: 'test'}, {margin: '10px'});
var img = mk.create('img', {alt: '', src: 'test.png'});

div.appendChild(img);
mk('body').appendChild(div);

innerHTML:

document.body.innerHTML = '<div class="myClass" title="test" style="margin:10px"><img alt="" src="test.png"></div>';

Что лучше использовать? Есть ли какие-нибудь подводные камни у каждого из способов?

[danik.js]

Че удобней, то и юзай. Ибо результат-то одинаковый

[ruslan_mart]

danik.js, ну говорят, что innerHTML быстрее, однако в IE могут возникать баги и утечки памяти.

[Яростный Меч]

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

это вроде в старых версиях IE было, мертвых ныне.
хотя в оном есть особенности, например п.4 http://innerhtml.ru/ , или, к примеру, опшены в селект не вставляются.

события однозначно удобнее через дом вешать.

а по скорости - да, innerHTML бывает быстрее, но тут тестить надо.

[danik.js]

ну говорят, что innerHTML быстрее

Ну и что теперь. Ну откажись от jQuery, от forEach и map, от querySelector и т.д. Ведь это все "медленное".

А ты сам-то тестил? Поищи готовые тесты на jsperf.
В хроме вообще-то уже давно innerHTML работает медленней. Возможно и файрфокс подтянулся.

[ruslan_mart]

Ну откажись от jQuery, от forEach и map, от querySelector

Из этого только querySelector'ом пользуюсь. Хотя, forEach тоже бывает иногда очень полезным, чтобы цикл не писать

[ruslan_mart]

Чтобы не создавать новой темы, тут же спрошу:

...

mk.prototype.props = function(props) {
   for(var i in props) this[i] = props[i];
   return this;
}

mk.prototype.styles = function(styles) {
   for(var i in styles) this.style[i] = styles[i];
   return this;
}

...

mk.create = function(tagName, props, styles) {
   var elem = document.createElement(tagName);
   return mk(elem).props(props).styles(styles);
}

/*Не работает в IE (тестил в IE11)*/
var fr = mk.create('iframe', {scrolling: 'no', src: 'test.php'});
document.body.appendChild(fr);

Почему не работает в IE? Другие элементы работают, а вот iframe - нет. В других браузерах всё нормально.

А вот так работает:

var fr = document.createElement('iframe');
fr.scrolling = 'no';
fr.src = 'test.php';
document.body.appendChild(fr);

[Riim]

от forEach и map, от querySelector и т.д. Ведь это все "медленное"

forEach и компания в хроме (т. е. у большинства пользователей, может уже и не только в хроме) уже давно рвут по скорости обычные циклы. А Object.keys+forEach уделывает for-in+hasOwnProperty. Более того сделав заказ именно сейчас Object.keys+forEach будет быстрей даже если создать объект через Object.create(null) и перебирать for-in-ом без hasOwnProperty. И все это еще и заметно удобнее. Пишу максимум циклов в таком стиле уже минимум 2 года.

[Яростный Меч]

Почему не работает в IE?

возможно, до сих пор жива проблема
http://javascript.ru/ajax/transport/...sozdaem-iframe

"Создать ифрейм - так же просто, как и любой другой элемент. Пожалуй, единственная подстава - в IE свойство name должно обязательно задаваться при создании элемента.
Т.е, нельзя сначала сделать iframe, а потом присвоить ему name"

[melky]

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

разве функция внутри forEach инлайнится движком?