Question

我正在尝试用符合DOM的节点内容替换代码中的一堆innerHTML引用。

<html>
    <body>hehe</body>
    <script type="text/javascript">
        var myDiv = document.createElement('div');
        myDiv.setAttribute('id', 'myDivID');
        document.getElementsByTagName('body')[0].appendChild(myDiv);
        var textNode = '<p>This will be dynamically generated.</p>';
        myDiv.appendChild(textNode);
    </script>
</html>

当然，脚本不应该在主体下面，但如果我把它放在上面，javascript会返回错误：

document.getElementsByTagName("body")[0]未定义

因为身体还不存在。

但就像现在一样，javascript在“appendChild”步骤中返回更加深奥的错误：

uncaught exception:
[Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.appendChild]"
nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"
location: "JS frame :: .....TestStuff/wut.jsp :: <TOP_LEVEL> :: line 8"
data: no]

那么这笔交易是什么？您可以使用myDiv.setAttribute引用重新生成myDiv.appendChild和getElementById行，结果相同。

编辑：对不起，上面的错误是firefox，而不是chrome。铬错误是：未捕获的错误：NOT_FOUND_ERR：DOM异常8 在myDiv.appendChild行上。我不明白为什么myDiv此时不会出现在DOM上，但Chrome似乎并不认为它是。

编辑2：所以，这一行：

var textNode = '<p>This will be dynamically generated.</p>';

如果进入

var textNode = document.createTextNode('< p>This will be dynamically generated.< /p>');

正确输出文字。但是，我想知道如何生成和附加一大块html，这些html将作为实际标记而不是纯文本输出 - 本质上可以模拟innerHTML。

Answer 1

var textNode = '<p>This will be dynamically generated.</p>';
myDiv.appendChild(textNode);

您需要将<p>元素及其中的文本创建为不同的节点。这应该是：

var paragraph = document.createElement('p');
var textNode  = document.createTextNode('This will be dynamically generated.');

paragraph.appendChild(textNode);
myDiv    .appendChild(paragraph);

假设你真的想要<p>...</p>元素。如果没有它，那么只需创建文本节点并将其附加到myDiv。

Answer 2

您是否有理由不将代码放入onload处理程序？听起来好像它可以解决你的大多数问题，如果不是全部的话。

现在，您正在尝试在浏览器解析XHTML之前修改DOM树。

Firefox / XHTML：创建和附加节点

2 个答案: