Каковы недостатки использования InnerHTML в JavaScript?
Свойство innerHTML чрезвычайно популярно, поскольку оно обеспечивает простой способ полностью заменить содержимое элемента HTML. Другой способ сделать это - использовать DOM Level 2 API (removeChild, createElement, appendChild), но использование innerHTML - это самый простой и эффективный способ изменения дерева DOM. Однако у innerHTML мало собственных проблем, о которых вам нужно знать:
- Содержимое заменяется повсеместно: когда вы добавляете (или иным образом модифицируете) innerHTML, все узлы DOM внутри этого элемента должны быть повторно обработаны и воссозданы.
- Сохраняет обработчики событий, привязанные к любым элементам DOM: установка innerHTML не будет автоматически привязывать обработчики событий к новым элементам, которые он создает, поэтому вам придется их отслеживать самостоятельно и добавлять их вручную, потенциально создавая утечку памяти на некоторых браузерах.
- Даже если вы используете + = как «innerHTML = innerHTML + 'html», все же старый контент заменяется на html: String конкатенация просто не масштабируется, когда необходимо создавать динамические элементы DOM, поскольку прокрутки и закрытие плюсов и цитат становится трудно отследить.