Question

我需要动态地将div中的body内容包装起来。我尝试了以下代码，我得到了'newDiv.append函数未定义'。我也尝试使用setTimeout并在为循环加载jquery文件后检查。仍然得到同样的错误。

function initiate() {
    var jq_script = document.createElement('script');
    jq_script.setAttribute('src', '//code.jquery.com/jquery-1.11.2.min.js');
    document.head.appendChild(jq_script);

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

我也试过用div元素包装body的innerHTML。

function initiate() {
    var jq_script = document.createElement('script');
    jq_script.setAttribute('src', '//code.jquery.com/jquery-1.11.2.min.js');
    document.head.appendChild(jq_script);

    var div = document.createElement("div");
    div.id = "wrapper";
    while (document.body.firstChild) {
        div.appendChild(document.body.firstChild);
    }
    document.body.appendChild(div);
}
initiate();

这样可以在body中添加包装元素。上面的脚本在iframe里面。

对此有任何解决方案吗？

Answer 1

两个问题：

它是appendChild，而不是append。

但是，一旦解决了问题，另一个问题就出现在你的循环中：childNodes是一个动态列表，所以当你移动一个从body到newDiv的孩子，列表会发生变化，导致索引无效。

你可以通过循环，将第一个孩子移动到div中来解决问题，直到body用完孩子，然后追加div：

var newDiv = document.createElement('div')
newDiv.id = "wrapper"; // You don't need or want setAttribute here
var bodyChildren = document.body.childNodes;
while (bodyChildren.length) {
    newDiv.appendChild(bodyChildren[0]);
}
document.body.appendChild(newDiv);

或者实际上，您甚至不需要列表，您可以使用firstChild：

var newDiv = document.createElement('div')
newDiv.id = "wrapper"; // You don't need or want setAttribute here
while (document.body.firstChild) {
    newDiv.appendChild(document.body.firstChild);
}
document.body.appendChild(newDiv);

为body的innerHTML包裹div元素

1 个答案: