TypeScript动态生成HTML元素未渲染DOM问题求助

问题原因 #

你使用textContent赋值时，浏览器会将所有内容当作纯文本解析，不会识别HTML标签，因此页面直接显示了拼接的代码字符串，而非渲染成DOM元素。

方案1：改用innerHTML（快速解决，注意风险） #

将textContent替换为innerHTML，浏览器会解析并渲染其中的HTML标签：

const displayContent = document.getElementById("display-content") as HTMLElement;

let displayVariable = "";

videoArr.forEach(data => {
    displayVariable += `<h1>${data.title}</h1><p>${data.description}</p><hr><br>`;
});
displayContent.innerHTML = displayVariable;

注意：如果data.title或data.description包含用户输入内容，使用innerHTML可能存在XSS注入风险，建议优先用方案2。

方案2：安全创建DOM元素（推荐） #

通过手动创建DOM元素并设置内容，避免字符串拼接的安全问题，同时更符合DOM操作规范：

const displayContent = document.getElementById("display-content") as HTMLElement;

videoArr.forEach(data => {
    // 创建标题元素
    const titleEl = document.createElement('h1');
    titleEl.textContent = data.title;
    
    // 创建描述元素
    const descEl = document.createElement('p');
    descEl.textContent = data.description;
    
    // 创建分隔线
    const hrEl = document.createElement('hr');
    
    // 依次添加到容器
    displayContent.appendChild(titleEl);
    displayContent.appendChild(descEl);
    displayContent.appendChild(hrEl);
});

这种方式通过textContent设置内容，会自动转义特殊字符，从根源避免XSS攻击。

内容的提问来源于stack exchange，提问作者gadss