Interpretar string de HTML com JavaScript

Neste artigo você vai aprender a como interpretar string de HTML com JavaScript, ou seja, fazer uma string virar HTML na página

Fala programador(a), beleza? Bora aprender mais sobre strings de HTML!

É comum que nós recebermos strings de HTML de um servidor, ou até mesmo criarmos strings que tenham código de HTML

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Isso pode ser feito para reaproveitamento de um template que se repete muitas vezes

Como dar vida então a esta string com HTML?

Temos dois caminhos:

• Selecionar um elemento existente no DOM e inserir o HTML nele;
• Criar um novo elemento, inserir no document e colocar o HTML nele;

Veja um exemplo de código para as duas abordagens, primeiro com a criação de um novo elemento:

const element = document.createElement('div');

element.innerHTML = "<h1>Teste</h1>";

document.body.appendChild(element)

E agora selecionando um elemento:

const element = document.querySelector('#container');

element.innerHTML = "<h1>Teste</h1>";

Nesta segunda abordagem selecionamos um elemento com querySelector

E ele é mais simples pois temos o elemento de container, que ficará o HTML, já inserido no nosso HTML

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você viu como interpretar string de HTML com JavaScript

Basicamente utilizamos o innerHTML para inserir a string, e dar vida a este HTML

Qualquer string com HTML válido, pode ser inserida em innerHTML

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!