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
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!