使用appendChild时如何展示HTML？JavaScript元素内容添加疑问

首先明确说：不能通过setAttribute来给目标div添加内容，因为setAttribute的作用是设置元素的属性（比如id、class这类），而div的内容属于元素的内部节点区域，和属性完全是两回事。

接下来帮你解决实际遇到的问题：
你之前碰到的两个状况，根源都是没选对设置内容的正确方式：

• 用cdiv.appendChild()报错，是因为你直接传入了字符串，而这个方法要求必须传入一个DOM节点（比如TextNode、Element这类对象）；
• 用createTextNode显示效果不符合预期，是因为这个方法会把所有内容当成纯文本处理——哪怕你的global[j].content里包含HTML标签（比如<p>、<br>），也会原封不动显示成字符串，不会被浏览器解析成对应的页面元素，这就是你看到图中那种标签直接暴露的原因。

正确的处理方式分两种场景：

1. 如果global[j].content是纯文本（不含HTML标签）
   直接使用元素的textContent属性，简单又高效：

   cdiv.textContent = global[j].content;
   

2. 如果global[j].content包含HTML标签，需要解析成页面元素
   使用元素的innerHTML属性，它会把字符串解析成对应的DOM节点插入到div内部：

   cdiv.innerHTML = global[j].content;
   

额外提醒：如果global[j].content是用户输入的内容，使用innerHTML要注意XSS风险，这种场景建议优先用textContent，或者先对内容做HTML转义处理。

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