создайте/добавьте узел по сравнению с innerHTML

Если производительность имеет значение, хорошо знать, что innerHTML относительно быстр, особенно в MSIE: http://www.quirksmode.org/dom/ innerhtml.html

Тем не менее, он имеет плохую репутацию, поскольку изначально был "проприетарным" свойством Microsoft и / или на самом деле не был "ОО".

Учитывая, что мне нужно вставить несколько тегов, кажется, имеет смысл использовать innerHTML.

Только «несколько»? Тогда скорость не проблема. Когда вы создаете сотню, вы должны думать о том, что делаете. Проблема не в создании, а в манипуляции со списком дочерних узлов, которая становится все медленнее и медленнее по мере добавления каждого дополнительного элемента.

Что касается добавления, у вас действительно нет выбора. Вы не можете установить innerHTML без потери существующего контента, поэтому, если вас не устраивает сериализация и повторный анализ (который стирает все несериализуемые данные, такие как содержимое формы, свойства / ссылки JavaScript и обработчики событий), вы в конечном итоге установка innerHTML другого элемента и перемещение каждого дочернего элемента по одному. Это то, что делают многие фреймворки, и обычно это заканчивается даже медленнее, чем вручную create-and-appendChild.

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

Также могут быть более быстрые взломы с использованием объектов Range для одновременного перемещения загрузки HTML, но, к сожалению, диапазоны являются очень кроссбраузерными переменными. Мне кажется, однако, что кто-то должен иметь возможность быстро построить append-html из диапазона IE range.pasteHTML и диапазона W3 . extractContents . Кто-нибудь готов для этого?

Насколько я могу судить, узел create / append просто предотвращает создание недопустимого кода

Потенциально недопустимая разметка не означает, что ваше приложение ломается в некоторых браузерах. Когда вы слепо объединяете HTML, не убегая, как идиот:

element.innerHTML= '<a href="'+url+'">'+title+'</a>';

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

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

element.innerHTML= '<table>'+'<tr><td>X</td><td><a href="#">go</a></td></tr>'.repeated(urls.length)+'</table>';
for (var i= 0; i<urls.length; i++) {
    var row= element.firstChild.rows[i];
    row.cells[0].firstChild.data= urls[i];
    row.cells[1].firstChild.href= urls[i];
}

(string.repeated не является стандартным JavaScript, но его использование здесь очевидно.)

Это просто означает, что ваше приложение не работает в некоторых браузерах. Когда вы слепо объединяете HTML, не убегая, как идиот:

element.innerHTML= '<a href="'+url+'">'+title+'</a>';

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

Вы можете, из Конечно, компромисс, создавая элементы и настраивая их содержимое отдельными шагами. Например:

element.innerHTML= '<table>'+'<tr><td>X</td><td><a href="#">go</a></td></tr>'.repeated(urls.length)+'</table>';
for (var i= 0; i<urls.length; i++) {
    var row= element.firstChild.rows[i];
    row.cells[0].firstChild.data= urls[i];
    row.cells[1].firstChild.href= urls[i];
}

(string.repeated не является стандартным JavaScript, но его использование здесь очевидно.)

Это просто означает, что ваше приложение не работает в некоторых браузерах. Когда вы слепо объединяете HTML, не убегая, как идиот:

element.innerHTML= '<a href="'+url+'">'+title+'</a>';

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

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

element.innerHTML= '<table>'+'<tr><td>X</td><td><a href="#">go</a></td></tr>'.repeated(urls.length)+'</table>';
for (var i= 0; i<urls.length; i++) {
    var row= element.firstChild.rows[i];
    row.cells[0].firstChild.data= urls[i];
    row.cells[1].firstChild.href= urls[i];
}

(string.repeated не является стандартным JavaScript, но его использование здесь очевидно.)

Я считаю, что на некоторых платформах вы получите повышение производительности, используя функции DOM вместо innerHTML, поскольку не требуется дорогостоящего синтаксического анализа HTML.

Это зависит от вашей цели.

Использование методов DOM для вставки html в документ позволит вам дополнительно манипулировать этими элементами до и после их вставки.

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

Еще лучшей альтернативой является использование библиотеки, такой как jQuery, для ваших манипуляций с DOM. Он устранит большинство несовместимостей между браузерами и будет более читабельным, чем использование методов DOM.