Javascript добавить элементы хорошей практики

Question

У меня есть пустой div, идентифицированный как "parent". Я хочу поместить элемент р внутри него. Есть два метода:

Первый метод:

parent.innerHTML = "";
parent.innerHTML = "<p>My dummy text</p>";

Второй метод:

var myP = document.createElement('p');
var myText = document.createTextNode("My dummy text here");
myP.appendChild(myText);
parent.appendChild(myP);

Есть ли разница между двумя методами, когда дело доходит до хороших практик?

Спасибо!

Answer 1

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

Если текст не содержит тегов HTML, textContent или innerText (IE) - лучший выбор, поскольку установка этих свойств не приведет к тому, что строка будет проанализирована как HTML.

Тонны document.createElement и appendChild обычно медленнее, чем установка свойства innerHTML, особенно когда вы сравниваете 1000x добавление к телу с 1x .innerHTML.

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

Answer 2

1-й вариант может удалить любые прослушиватели событий, которые могут быть у вас в этой части DOM
В то время как второй вариант не будет.

Лучше пойти с опцией # 2.

Answer 3

.innerHTML это дьявол.Мы не используем его.

Мы используем методы DOM, потому что мы не должны взламывать встроенные фрагменты JavaScript.

Единственный допустимый вариант использования для .innerHTML - это перекрестныйвзлом совместимости с браузером и движки шаблонов.

Если вы не делаете ни одного из них, то вы должны использовать DOM4.

Answer 4

Первый подход может ввести дыры XSS, если вы не будете осторожны. Использование с постоянными строками, как в вашем примере, безопасно, но учтите следующее:

parent.innerHtml = "<p>" + document.getElementById('userInput').value + "</p>";

Вы только что ввели пользовательский ввод прямо в вашу DOM. Если этот вход содержит тег script, то вы только что были XSS'd. Это надуманный пример, но вы можете представить, как вы могли бы случайно сгенерировать строку из неэкранированного пользовательского ввода на стороне сервера и записать ее в свой DOM.

Answer 5

Вот некоторые отличия:

BAD

• Это не стандарт. Это собственное свойство, которое Microsoft представила (наряду с менее популярным externalHTML), которое подхватили другие производители браузеров.
• Так как это не стандарт, он не должен работать в MIME-типе application / xhtml + xml, под которым должны обрабатываться документы XHTML. (Firefox 1.5 изменил это, разрешив по какой-то причине)
• InnerHTML - это строка. DOM - это не строка, это иерархическая объектная структура.
• Во многих случаях это делает почти неразборчивый код с экранированными кавычками и знаками плюс, добавляя данные в строку.

GOOD

• Это быстрее, чем методы DOM. По жребию.

• Это менее многословно, чем методы DOM.

• Это позволяет вам брать произвольные куски разметки и помещать их в документ без необходимости их разбора.

Answer 6

С GWT UiBinder doc :

«Браузеры лучше строят структуры DOM, втискивая большие строки HTML в атрибуты innerHTML, чем в кучу вызовов API.»

Я думаю, они знают, о чем говорят в этом случае.

Так что кроме того факта, что он не добавляется, как упомянул Роб Мейофф в комментарии, вероятно, быстрее перейти на innerHTML, особенно для менее тривиальных случаев.

Answer 7

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

При использовании appendChild этой проблемы не возникает. Таким образом, хорошей практикой является манипулирование DOM и правильное добавление.

Если вы считаете, что это слишком много работы, создайте каждый элемент и добавьте его, вы можете рассмотреть возможность использования некоторого фреймворка, чтобы сделать его быстрее. Например, jQuery позволяет вам использовать $(parent).html("<p>My dummy text here</p>") и автоматически создавать для вас узлы.