I'm experimenting with creating a dynamic HTML element using TypeScript to display on a webpage.
In my .ts file, my code looks 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;
In my HTML file, I have: <div id="display-content"></div>
However, the output is not what I 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 seems to display the HTML code instead of rendering the DOM. Any ideas on why this is happening?