2013-08-29 5 views
9

Извините за то, что вы JavaScript, но может кто-нибудь объяснить, почему не рекомендуется использовать .innerHTML. Когда у нас есть что-то более быстрое и легкое в форме .innerHTML, почему мы не должны его использовать?Почему это рекомендуется избегать .innerHTML?

+1

Кто сказал, что вы не должны его использовать? А что быстрее, чем что? – Steve

+2

'innerHTML' работает поверх сериализованных данных, что не так, как DOM работает концептуально. Относительно легко испортить что-то при создании больших кусков HTML вручную, тем самым труднее поддерживать. Кроме того, HTML внутри JS является ужасно уродливым в глазах многих опытных разработчиков JS (и вы наверняка подумаете так же, когда увидите, что половина JS-файла является HTML-кодом, смешанным с JavaScript). Вот почему у нас есть JS-шаблоны, а также Angular framework. Но да, вы можете поместить некоторый HTML внутри JS без проблем функционально (сохраните пару случаев со старым IE, как ответил @Evan). –

ответ

12

innerHTML является кувалдой. Он уничтожит содержимое выбранного элемента DOM и заменит его тем, что будет назначено в то время. Это приводит к ряду проблем с экранированием HTML и проверки.

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

Есть также некоторые проблемы, связанные с утечками памяти в старых версиях IE, когда элементы удаляются из DOM.


Со всем, что сказал, я не говорю вам, что вы не должны использовать innerHTML. Я использую его все время в jQuery, когда я использую $(selector).html(). Иногда кувалдой является правильный инструмент для задания, и когда события делегируются должным образом, неважно, сколько будет загружено содержимое.

+1

+1, я почти забыл о людях, которые пытались «element.innerHTML + = ...», затем заметить, как все обработчики событий/связанные с ними виджеты из потомков этого элемента были уничтожены. –

+0

IIRC Я помню, как Resig делал некоторые хаки для разных браузеров, потому что несоответствие в производительности innerHtml. Я предполагаю, что все больше причин использовать обертку. –

+0

+1, мне нравится аналог кувалды. Если вы знаете, как правильно использовать innerHTML, вы можете сэкономить много времени ... пока вам не нужно делать коварную работу. Как молот. – Steve