javascript - 可以insertBefore插入HTML标签吗？

Question

在下面的脚本中，我在 DIV 的开头插入了一些代码。

    var mydiv = document.getElementById("myDIV");
    var mycontent = document.createElement("p");
    mycontent.insertBefore(document.createTextNode("Hello <b>World</b><br><bR>"));
    mydiv.insertBefore(mycontent,mydiv.firstChild);

在我的网站上，代码作为文本插入，HTML 格式被忽略。有谁知道如何使用 javascript 将代码插入到 DIV 中？

Answer 1

不能插入标签，只能插入 DOM 节点。DOM 节点可以是文本节点或元素节点（或其他一些您几乎肯定不关心的节点）。

区别很重要，因为您可以插入<div></div>但不能<div>。

要创建一个元素：

var myElement = document.createElement('div');

您的特定示例：

var myContent = document.createElement('p');
myContent.appendChild(document.createTextNode('Hello'));
var bold = document.createElement('b'); // Please don't use presentational elements in 2012
bold.appendChild(document.createTextNode('World');
myContent.appendChild(bold);
myContent.appendChild(document.createElement('br')); // Please don't use line breaks as margin/padding substitutes
myContent.appendChild(document.createElement('br')); 
mydiv.insertBefore(mycontent,mydiv.firstChild);

Answer 2

您可以与元素结合使用并innerHTML获得简单的解决方案：

var mydiv = document.getElementById("myDIV");
var mycontent = document.createElement("p");
mycontent.innerHTML = 'Hello <b>World</b><br><bR>';
mydiv.insertBefore(mycontent, mydiv.firstChild);

Answer 3

为什么不

var mydiv = document.getElementById("myDIV");
var mycontent = document.createElement("p");
mycontent.innerHTML = "Hello <b>World</b><br><bR>";
mydiv.insertBefore(mycontent,mydiv.firstChild);​