Несколько дней назад во время создания проекта мне задали вопрос, который меня действительно заинтриговал, чтобы найти и прочитать об этом. Вопрос был:

«Что, если бы я использовал строки шаблона вместо createElement для создания HTML-элементов? Есть ли разница?

И « document.createElement() », и « литералы шаблонов » позволяют нам создавать элементы, поэтому возникает вопрос, когда что использовать? Есть ли какая-то разница, используем ли мы какой-либо из них или заменяем их? Вы узнаете, как вы продолжаете читать.

создатьЭлемент()

• Метод createElement() — это функция DOM уровня 1, представленная в 1998 году.
• Он старый и надежный, но есть избыточность, когда нам приходится время от времени создавать элементы.
• Браузер поддерживает createElement() на 97,92 % .

• Шаблонные литералы были представлены в ES6, также известном как ECMAScript 6, в 2015 году.
• Он новее, быстрее, содержит меньше кода, более удобен для чтения, прост в обслуживании и имеет меньше шансов справиться с ошибками.
• Браузер поддерживает строки шаблонов на уровне 97,11 % , что невелико по сравнению с createElement(), но вот в чем дело: литералы шаблонов не работают в IE 11, Opera и Blackberry.

Ниже приведен пример кода для добавления элементов HTML с помощью createElement и литералов шаблона.

JS-способ

Альтернатива с литералами шаблонов

Вывод

Как вы видели, даже в приведенном выше примере кода нет большой разницы, когда мы создаем элементы, используя createElement() или используя строки шаблона. Таким образом, ответ на вопрос сводится к выбору того, что лучше всего работает для вас вместе с браузером, с которым мирятся пользователи приложения. Поскольку IE11, Opera и Blackberry еще не поддерживают строки шаблонов, вы можете использовать метод createElement().