Последний (appendChild) не вызывает полную перестройку DOM или даже всех элементов / узлов в пределах цели.
Первый (настройка innerHTML) вызывает полную перестройку содержимого целевого элемента, что, если вы добавляете, не нужно.
При добавлении через innerHTML += content браузер проходит через все узлы в элементе, формирующем строку HTML для предоставления слою JavaScript. Затем ваш код добавляет к нему текст и устанавливает innerHTML, в результате чего браузер удаляет все старые узлы в целевом объекте, повторно анализирует весь этот HTML и создает новые узлы. Так что в этом смысле это может быть неэффективно. (Однако, разбор HTML - это , что делают браузеры , и они действительно, очень быстрые в этом.)
Установка innerHTML действительно делает недействительными любые ссылки на элементы в целевом элементе, который вы можете удерживать - поскольку эти элементы больше не существуют, вы удалили их, а затем вставили новые (которые выглядят очень похожими), когда вы набор innerHTML.
Короче говоря, если вы добавляете , я бы использовал appendChild (или insertAdjacentHTML, см. Ниже). Если вы заменяете, есть очень допустимые ситуации, когда использование innerHTML является лучшим вариантом, чем самостоятельное создание дерева с помощью DOM API (скорость среди них самая высокая).
Наконец, стоит упомянуть insertAdjacentHTML - функцию, которую вы можете использовать для вставки узлов и элементов в элемент или рядом с ним, используя строку HTML. Вы можете добавить к нему элемент: theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); Первый аргумент - где поместить HTML; Вы можете выбрать "beforebegin" (вне элемента, прямо перед ним), "afterbegin" (внутри элемента, в начале), "beforeend" (внутри элемента, в конце) и "afterend" (снаружи элемент, только после него). Обратите внимание, что "afterbegin" и "beforeend" вставляются в сам элемент, тогда как "beforebegin" и "afterend" вставляются в родительский элемент . Поддерживаемый всеми основными браузерами для настольных компьютеров, я понятия не имею, насколько хороша мобильная поддержка (хотя я уверен, что iOS Safari и Android 2.x и выше имеют ее, по крайней мере), но шим крошечный.