2

Добрый день, знатоки javascript. Есть ли какая-то разница в добавлении элементов через innerHTML или appendChild? У меня есть длинные строки, которые надо добавить, например

<tr><td><img class='button' alt='delete'></td></tr>

Поскольку это single page application, есть вероятность того, что к только что добавленным элементам придётся обращаться (вешать обработчики, удалять и так далее). При добавлении через appendChild это, естественно, занимает много строчек кода и читабельность кода падает. Если добавить просто с помощью шаблонов-строк, читабельность повысится. Есть ли какие-то подводные камни?

1
  • 1
    Есть ли какая-то разница в добавлении элементов через innerHTML или appendChild? - принципиальная!
    – Grundy
    Commented 31 мая 2017 в 15:17

1 ответ 1

2

Разница между указанными функциями - принципиальная. Они делают абсолютно разные вещи.

.innerHtml

Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.

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


.appendChild

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node.

Метод Node.appendChild() добавляет узел в конец списка дочерних узлов.

6
  • Так уж и принципиальная :)
    – user207618
    Commented 31 мая 2017 в 17:52
  • немного неправильно сформулировал задачу: 1. сначала делаю createElement('tr'). Потом в него набиваю td-шки. Могу набить через createElement, потом appendChild. Могу через innerHTML. В конце новую строку, естественно добавляю в конец существующих строк, т.е. appendChild. Вопрос в том, после создания tr, как лучше набить ее td-шками, с точки зрения производительности, правильности и тд. Commented 31 мая 2017 в 20:40
  • чтобы не быть тупишкой, сразу покажу: есть такая таблица:habrastorage.org/web/ed3/309/28b/… Собственно мне надо добавить новую строку в неё. Как это лучше сделать: appendChild или innerHTML. Commented 31 мая 2017 в 20:48
  • @Aid, конечно, полный цикл очищения и разбора, вместо одной операции вставки :)
    – Grundy
    Commented 1 июн. 2017 в 6:49
  • @ТобакаловКаниет, лучше - это понятие относительное: если у тебя новый элемент и ты его хочешь заполнить - то разницы может и не быть (возможно в производительности, но нужно сильно постараться, чтобы она стала заметна)
    – Grundy
    Commented 1 июн. 2017 в 6:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.