Estou tentando criar um elemento HTML dinâmico a partir do TypeScript para ser exibido em HTML.
no meu arquivo .ts, meu código é assim:
const displayContent = document.getElementById("display-content") as HTMLOutputElement;
var displayVariable = "";
videoArr.forEach(data => {
displayVariable += "<h1>"+data.title + "</h1>"+"<p>"+data.description +"</p></hr></br>";
});
displayContent.textContent = displayVariable;
no meu arquivo html é como:<div id="display-content"></div>
mas a saída não é o que eu esperava:
<h1>Book 1 Water</h1><p>Learn the water bending</p></hr></br><h1>Book 2 Earth</h1><p>Learn the earth bending</p></hr></br><h1>Book 3 Fire</h1><p>Learn the fire bending</p></hr></br>
mostra o código html como saída e não renderizou o DOM. qualquer ideia?
Você precisa usar
displayContent.innerHTML
para renderizar a string como html.textContent
renderiza especificamente apenas texto