Это неправильно, чтобы вставить элементы, используя текст и .innerHTML?

Question

У меня есть некоторый JavaScript, который выглядит так:

var sel = '<option value="{value}" {selected}>{name}</option>';
...
$(index + '_expiry').innerHTML = sel; // $(index + '_expiry) is a select.

Это прекрасно работает в Firefox, но не в Internet Explorer - даже в IE9.

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

Неправильно ли вставлять новые элементы на страницу, манипулируя .innerHTML? Я использую подход innerHTML по всему сайту, и это легко. Он работает в IE для простых элементов, таких как .div.

Хотя IE часто раздражает в работе, более новые версии имеют более строгий синтаксический анализатор javascript, который, вероятно, более корректен - например, ему не нравится массив, созданный как ['a','b','c',].

Итак, это плохо, неэффективно, ненадежно или похоже на использование .innerHTML для создания новых элементов HTML в DOM? Должен ли я использовать его только для вставки простого текста? Или это просто IE Бениг упрямый?

Answer 1

Итак, это плохо

Субъективное

неэффективно

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

ненадежен

Браузеры совместимы (хотя и не всегда с другими браузерами), поэтому вы можете положиться на достойно протестированныеcode.

Или это просто IE, бениг упрямый?

IE не нравится редактировать внутренние элементы определенных элементов (в частности, таблиц и отдельных элементов).

Answer 2

innerHTML отлично, если ваш код на самом деле правильный.Смысл использования DOM-манипуляции состоит в том, что невозможно создать плохо сформированный HTML из-за опечатки или потому, что, скажем, значение того, что входит в заполнитель {name}, содержит синтаксис HTML.Считается, что это лучше, потому что помогает предотвратить ошибки - это, вероятно, промывка, когда вы генерируете куски HTML размером всего в один простой тег.

Answer 3

Вы используете jQuery и не используете его одновременно . Просто используйте jQuery:

$(index + '_expiry').html('<option value="{value}" {selected}>{name}</option>');