Question

我试图在DIV中动态包装文档正文标记的内容。到目前为止，我使用了以下代码：

document.body.innerHTML = '<div id="wrap">' + document.body.innerHTML + '</div>';

这样做有效，但是有一个不必要的副作用，即同一页面上的其他脚本停止工作（我假设因为更改innerHTML呈现任何对象引用它们可能已经无效）。

使用纯JavaScript或Prototype框架实现此目的并保持参考完整的最佳/最有效方法是什么？

Answer 1

您可以这样做：

var div = document.createElement("div");
div.id = "wrap";

// Move the body's children into this wrapper
while (document.body.firstChild)
{
    div.appendChild(document.body.firstChild);
}

// Append the wrapper to the body
document.body.appendChild(div);

Answer 2

你可以尝试一下吗？（另）

var newDiv = document.createElement('div')
newDiv.setAttribute('id','wrap');
var bodyChildren = document.body.childNodes;
for(var i=0;i<bodyChildren.length;i++){
  newDiv.append(bodyChildren[i]);
}
document.body.appendChild(newDiv);

不确定原型，但在jQuery中你可以做到这一点

$('body').wrap('<div id="wrap"></div>');

Answer 3

也许是这样的：

var body = document.body;
var div = document.createElement('div');
div.className = 'wrapper';

div.innerHTML = body.innerHTML;
body.innerHTML = div.outerHTML;

Answer 4

$('#iframe').contents().find('body').wrap('<div class=body></div>');
$('#iframe').contents().find('body').replaceWith(function() {return this.innerHTML});
$('#iframe').contents().find('.body').wrap('<body></body>');

这行将在body元素标记内包装div。首先，它将包装body标签，然后删除body标签并将其所有内容附加到body div，第3行将使用body标签再次包装此div。

在文档正文内容周围包裹div

4 个答案: