1

我正在尝试用符合 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 的。chrome 错误是：未捕获的错误：NOT_FOUND_ERR：myDiv.appendChild 行上的 DOM 异常 8。我不明白为什么 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。

4

2 回答 2

2 
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.

于 2010-09-01T23:44:45.847 回答
1

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

现在，您正试图在浏览器完成对 XHTML 的解析之前修改 DOM 树。

于 2010-09-02T01:24:37.270 回答