Добавление элементов DOM, что такое правильный путь?

Ответ 1

Нет "лучшей" или "лучшей практики". Это два разных метода добавления контента, которые имеют разные характеристики. Какой из них вы выбираете, зависит от вашего конкретного обстоятельства.

Для создания множества и множества элементов, установка блока HTML сразу же, как правило, показана быстрее, чем создание и вставка большого количества отдельных элементов. Хотя, если вы действительно заботитесь об этом аспекте производительности, вам нужно будет проверить свое конкретное обстоятельство в таком инструменте, как jsperf.

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

Если вы действительно не знаете разницы между этими двумя методами и не видите очевидной причины использовать один над другим в конкретном случае, используйте тот, который проще и меньше кода. Это то, что я делаю.

В ответ на ваши конкретные вопросы:

• Нет "лучшего" способа. Выберите метод, который лучше всего подходит для ваших обстоятельств.
• Вам нужно будет проверить эффективность ваших конкретных обстоятельств. В некоторых случаях большое количество HTML было показано быстрее, установив одну большую строку с помощью .innerHTML, а не индивидуально создав вставку всех объектов.
• Нет "правильного пути" или "лучшей практики". См. ответ №1.
• Для конечного результата, созданного этими двумя методами, не должно быть разницы, если они закодированы для создания того же конечного результата.

Ответ 2

Мне действительно нравится сочетание обоих: createElement для внешнего элемента, поэтому вы не будете удалять обработчики событий и innerHTML для содержимого этого элемента для удобства и производительности. Например:

var strong = document.createElement('strong');
strong.innerHTML = 'Hi';
document.getElementById('theEl').appendChild(strong);

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

Ответ 3

1. Каков наилучший способ? Один из них - одна строка, другая - около пяти строк.

Это зависит от контекста. Вы, вероятно, хотите использовать innerHTML экономно, как правило.

2. Каков аспект производительности?

DOM-манипуляция значительно превосходит innerHTML, но браузеры, похоже, продолжают улучшать производительность innerHTML.

3. Каков правильный путь или наилучшая практика?

См. № 1.

4. Есть ли разница между кодами в целом?

Да. Пример innerHTML заменит содержимое существующего элемента, в то время как пример DOM поместит новый элемент рядом со старым. Вы, вероятно, хотели написать mydiv.appendChild(strong), но это все равно другое. Существующие дочерние узлы элемента добавляются, а не заменяются.

Ответ 4

Что вы имели в виду лучше всего? Только в одной операции DOM все хорошо и показывает ту же производительность. Но когда вам нужна множественная вставка DOM, все идет по-другому.

Фон

Каждый раз, когда вы вставляете DOM node, браузер отображает новое изображение страницы. Поэтому, если вы вставляете несколько дочерних элементов внутри DOM node, браузер отображает его несколько раз. Эта операция самая медленная, которую вы увидите.

Решение

Итак, нам нужно добавить сразу всего ребенка. Используйте пустой dom node. Встроенный createDocumentFragment();

var holder = createDocumentFragment();
// append everything in the holder
// append holder to the main dom tree

Реальный ответ

Если в этом случае вы описали, я бы предпочел самое короткое решение. Поскольку в операции с одним домом нет штрафа за производительность