Javascript dom树修改答案

【问题标题】：Javascript dom tree modificationJavascript dom树修改
【发布时间】：2011-02-06 22:23:08
【问题描述】：

像这样使用 javascript 修改 dom 树的“主体”的方法是什么：

Original htm:    <html> <head></head>   <body>  blah blah blah  </body>  </html>

Modified html:    <html>  <head> </head>  <abc> <body> blah blah blad </body> </abc> </html>

也就是说，我希望将整个 body 节点放在另一个节点中。

我正在尝试的代码是：

// 创建一个 iframe

var orig_iframe = document.createElement('iframe');

// 在 iframe 中复制 body 的内容（希望如此！）

orig_iframe.contentDocument.innerHTML=document.body.innerHTML;

// 设置文档正文为空

document.body.innerHTML = '';

// 添加 iframe 到 body

document.body.appendChild(orig_iframe);

这不起作用。显然我错过了什么！

谢谢！

【问题讨论】：

会发生什么？您收到任何错误消息吗？
我不会尝试这个。您正在尝试生成不符合 HTML 规范的 DOM。浏览器执行某些级别的错误恢复，有时会直接拒绝试图违反规范的更改。
你想在元素中包含吗？
@David：对不起，我有点初学者，不明白你的意思。 @杰拉德：是的。基本上，我想生成原始正文内容
@David：顺便说一句，abc 只是举例。我将使用正确的 html 标签（在我的例子中，iframe）...如果那是你提到的问题。

标签： javascript dom tree innerhtml appendchild

【解决方案1】：

orig_iframe.contentDocument.innerHTML=document.body.innerHTML;

HTMLDocument 上没有 innerHTML 属性，只有 HTMLElement 上。您可能希望在 iframe 文档的 body 元素上设置 innerHTML。

但是，动态写入iframes 会有一些浏览器问题。

var html= document.body.innerHTML;
var iframe= document.createElement('iframe');
document.body.appendChild(iframe);
var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
idoc.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head></head><body></body></html>');
idoc.close();
idoc.body.innerHTML= html;

带有contentWindow的业务是IE至版本7所必需的，不支持标准属性contentDocument。

write() 调用是为了确保在iframe 中存在一个最小文档，以便您可以在其主体上设置innerHTML。其中的<!DOCTYPE 声明需要将该窗口置于标准模式（希望这也是您在主文档中使用的）。

虽然您可以 document.write 将 HTML 内容添加到新文档中，但这会导致正文中的任何 <script> 元素在新文档中再次执行，这可能是您不希望的.写入innerHTML 可避免立即执行字符串中的任何脚本。

【讨论】：