“innerHTML + = …” по сравнению с “appendChild (txtNode)”
Вопрос, сравнивая конкатенацию с помощью innerHTML и добавляя текстовый узел к существующему узлу. Что происходит позади сцены?
Мои мысли вокруг этого до сих пор:
- Я предполагаю, что оба вызывают 'Обратное течение'.
- Последний (добавление текстового узла), от того, что я знаю, также вызывает полное, восстанавливают DOM (корректный? Они оба делают это?).
- У первого, кажется, есть некоторые другие противные побочные эффекты, как порождение ранее сохраненных ссылок на дочерние узлы к узлу, я изменяю innerHTML, чтобы больше не указать на 'текущий DOM'/'correct на версию дочернего узла'. Напротив, при добавлении детей ссылки, кажется, остаются неповрежденными. Почему это?
Я надеюсь Вы, люди могут разрешить это для меня, Спасибо!
1 ответ
Последний ( appendChild ) не не ] вызывает полную перестройку DOM или даже всех элементов / узлов в целевом объекте.
Первый вариант (настройка innerHTML ) вызывает полное перестроение содержимого целевого элемента, что при добавлении не требуется.
Добавление через innerHTML + = content заставляет браузер проходить через все узлы в элементе, создавая строку HTML для передачи на уровень JavaScript. Затем ваш код добавляет к нему текст и устанавливает innerHTML , в результате чего браузер удаляет все старые узлы в целевом объекте, повторно анализирует весь этот HTML и создает новые узлы. Так что в этом смысле это может быть неэффективным. (Однако синтаксический анализ HTML - это то, что делают браузеры , и они действительно очень быстро справляются с этим.)
Установка innerHTML действительно делает недействительными любые ссылки на элементы в целевом элементе, который вы может задерживаться - поскольку эти элементы больше не существуют, вы удалили их, а затем вставили новые (которые выглядят очень похоже), когда вы установили innerHTML .
Короче говоря, если вы добавляете , я бы использовал appendChild (или insertAdjacentHTML , см. Ниже). Если вы заменяете, существуют вполне допустимые ситуации, когда использование innerHTML является лучшим вариантом, чем создание дерева самостоятельно через DOM API (скорость является главной среди них).
Наконец, стоит упомянуть insertAdjacentHTML , функцию, которую вы можете использовать для вставки узлов и элементов в элемент или рядом с ним с помощью строки HTML. Вы можете добавить к элементу с его помощью: theElement.insertAdjacentHTML ("beforeend", "HTML идет сюда"); Первый аргумент - куда поместить HTML; ваш выбор: "beforebegin" (вне элемента, прямо перед ним), "afterbegin" (внутри элемента, в начале), "beforeend" (внутри элемента, в конце) и «после» (вне элемента, сразу после него). Обратите внимание, что «afterbegin» и «beforeend» вставляются в сам элемент, тогда как «beforebegin» и «afterend» вставляются в родительский элемент . Поддерживается всеми основными настольными браузерами, я понятия не имею, насколько хороша мобильная поддержка (хотя я уверен, что она есть в iOS Safari и Android 2.x и выше), но прокладка крошечная.