Question

如何使用javascript修改dom树的“body”：

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中复制正文内容（希望！）

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

//将文档正文设置为null

document.body.innerHTML ='';

//将iframe添加到正文

document.body.appendChild（orig_iframe）;

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

谢谢！

Answer 1

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

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

但是，动态编写iframe会导致浏览器出现一些问题。

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;

对于最高版本为7的IE，contentWindow的商家是必需的，不支持标准属性contentDocument。

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

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

Javascript dom树修改

1 个答案: