Search code examples
typescriptdom

typescript append html element to html

I am trying to create a dynamic html element from typescript to be displayed on html.

on my .ts file, my code is like this:

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;

on my html file is like: <div id="display-content"></div>

but the output is not what I have expected:

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

it shows the html code as the output and it didn't render the DOM. any idea?

Solution

  • You need to use displayContent.innerHTML to render the string as html. textContent specifically renders text only