typescript 将 html 元素附加到 html

Question

我正在尝试从打字稿创建一个动态 html 元素以显示在 html 上。

在我的.ts文件中，我的代码是这样的：

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;

在我的html文件上就像：

<div id="display-content"></div>

但输出不是我所期望的：

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

它显示 html 代码作为输出，并且没有渲染 DOM。有什么想法吗？

Answer 1

您需要使用

displayContent.innerHTML

将字符串呈现为 html。

textContent

专门仅渲染文本