Firefox/XHTML：创建和附加节点

发布于 2024-09-17 14:47:45 字数 1595 浏览 4 评论 0原文

我正在尝试用符合 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]

那么这是怎么回事呢？您可以使用 getElementById 引用替换 myDiv.setAttribute 和 myDiv.appendChild 行，结果是相同的。

编辑：抱歉，以上错误是 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，它将输出为实际标记而不是纯文本——本质上可以模拟innerHTML。

原文

I'm trying to replace a bunch of innerHTML references in code with DOM-compliant node stuff.

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

Sure, the script isn't supposed to be below the body, but if I place it above, the javascript returns the error:

document.getElementsByTagName("body")[0] is undefined

since the body doesn't exist yet.

But as it is now, the javascript returns the even more esoteric error on the "appendChild" step:

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]

So what's the deal, here? You can repalce the myDiv.setAttribute and myDiv.appendChild lines with getElementById references and the result is the same.

Edit: sorry, the above errors are firefox ones, not chrome ones. The chrome error is:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
on the myDiv.appendChild line. I don't get why myDiv wouldn't be on the DOM at this point, but chrome doesn't seem to think it is.

Edit 2: So, this line:

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

if made into

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

Will output text correctly. However, I want to know how to generate and append a chunk of html that will output as actual markup rather than pure text--something that can emulate innerHTML, essentially.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

在风中等你 2024-09-24 14:48:25

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

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

回复收藏 0 原文

浅蓝的眸勾画不出的柔情 2024-09-24 14:48:18

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

您需要将

元素及其内部的文本创建为不同的节点。这应该是：

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

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

假设您确实需要

...

元素。如果您可以不使用它，则只需创建文本节点并将其附加到 myDiv 即可。

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

You need to create the <p> element and the text inside of it as distinct nodes. This should be:

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

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

That's assuming that you really want the <p>...</p> element. If you can do without it then simply create the text node and append that to myDiv.

回复收藏 0 原文

~没有更多了~