Alguns dias atrás, enquanto construía um projeto, me fizeram uma pergunta que realmente me intrigou ao encontrá-la e lê-la. A pergunta era:

“E se eu usasse strings de modelo em vez de usar createElement para criar elementos HTML? Faz alguma diferença?”

Ambos “ document.createElement() ” e “ template literals ” nos permitem criar elementos, então surge a questão de quando usar o quê? Faz alguma diferença se usarmos algum deles ou substituí-los? Você descobrirá enquanto continua lendo.

criarElemento()

• O método createElement() é um recurso de nível 1 do DOM que foi introduzido em 1998.
• É antigo e robusto, mas há redundância quando temos que criar elementos de vez em quando.
• O suporte do navegador para createElement() é bom em 97,92 % .

• Os literais de modelo foram introduzidos no ES6, também conhecido como ECMAScript 6, em 2015.
• É mais recente, mais rápido, tem menos código, mais legibilidade, é fácil de manter e tem menos chances de lidar com bugs.
• O suporte do navegador para strings de modelo é de 97,11%, o que não é uma grande diferença quando comparado a createElement(), mas aqui está o fato de que os literais de modelo não funcionam no IE 11, Opera e blackberry.

Abaixo está um trecho de código de amostra para adicionar elementos HTML usando createElement e literais de modelo.

caminho JS

Alternativa com literais de modelo

Conclusão

Como você viu, mesmo no código de exemplo acima, não há muita diferença quando criamos elementos usando createElement() ou usando strings de modelo. Portanto, a resposta para a pergunta se resume a escolher o que funciona melhor para você junto com o navegador que os usuários do aplicativo estão suportando. Como IE11, Opera e Blackberry ainda não suportam strings de modelo, você pode optar pelo método createElement().