Javascript 如何使用DOM而不是HTML连接创建带有格式化项的列表？

请原谅我，让我知道如果我的帖子是不正确的，因为我是这个论坛的新成员

我在这里找到了大部分答案，但我的问题来自.createTextNode。我的用户正在使用多个编辑器框构建大纲。在这些框中，他们可以设置文本下划线、颜色、粗体等的格式。。因此，我要传递给.createTextNode的数组项实际上包含HTML标记，用于格式化行项。但是.createTextNode使其成为纯文本，而纯文本在通过document.getElementById'foo.appendChild显示时会吐出标记而不是应用它

我知道我应该远离HTML连接，但它看起来非常诱人

在追加和显示列表项时，是否有任何方法可以保留其格式

提前感谢您的帮助

尝试innerHTML，它将尝试将内容字符串解析为HTML结构。例如，您有一个P标记

将给你一个可点击的锚

<p id="asdf">
    <a href="#">qwerty</a>
</p>

但是要小心！！！请注意，我在这里使用了三个bang符号，在插入之前，您必须确保没有有害代码。检查此示例：

document.getElementById('asdf').innerHTML = '<img src="image.png" onload="alert(1)">'

您将看到一个警报对话框。虽然这个例子很简单，但在实践中它可能更危险，例如，动态地将跨站点脚本附加到页面中，即

编辑：这是一个演示

var选项=[，]； 函数makeUL{ var-LIs=； 对于i=0；i尝试innerHTML而不是createTextNodeWell，如果您的HTML字符串已经构建好了，那么让浏览器为您解析它并没有什么错。只需设置节点的innerHTML属性。在我的原始帖子中的链接示例中，我将在哪里使用innHTML？我尝试了“code”//将选项[0]的内容添加到foo:document.getElementById'foo.AppendChildMakeuOptions[0]；'code'sorry在我写最后一条评论之前按enter键。在我的原始帖子中的链接示例中，我在哪里使用HTML？我尝试了[code]document.getElementById'foo'。innerHTML=MakeuOptions[0]；[[code]而不是[code]document.getElementById'foo.appendChildmakeULoptions[0]；[code]。但是它打印了对象。或者在设置内容时使用它，那么如何使用.InherHTML而不是[code]item.appendChilddocument.createTextNodearray[I]；[code]更新了fiddle，我想现在对你来说已经很清楚了。设置为innerHTML的值应该是：1字符串类型；2代表有效的HTML结构。好的，刚才看到了你的fiddle链接。所以在我看来，这似乎是通过一个函数来构建HTML或HTML连接。我最初是这么想的，但大多数帖子都说使用DOM，这可能是错误的在我的场景中不可能。谢谢，我将等待其他一些评论，但是如果我没有看到任何其他DOM解决方案，我将标记您的作为答案。

document.getElementById('asdf').innerHTML = '<img src="image.png" onload="alert(1)">'