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 Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

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!