Обертывание div вокруг содержимого тела документа

Я пытаюсь динамически обернуть содержимое тега body документа в DIV. До сих пор я использовал следующий код:

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

это работает, но имеет нежелательный побочный эффект, что другие скрипты на той же странице перестают работать (я предполагаю, потому что изменение innerHTML делает любые ссылки на объекты, которые они могли держать бесполезными).

каков был бы лучший / наиболее эффективный способ достичь этого и сохранить ссылки нетронутыми, используя чистый JavaScript или прототип рамки?

7
html javascript prototypejs wrap

4 ответов

вы бы сделали что-то вроде:

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);
13

вы можете попробовать это? (непроверено)

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>');
2

может, что-то вроде этого:

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

div.innerHTML = body.innerHTML;
body.innerHTML = div.outerHTML;
0
$('#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>');

эти строки собираются обернуть div внутри тега элемента тела. Во-первых, он обернет тег тела, затем удалите тег тела и добавьте все его содержимое в тело div, а 3-я строка снова обернет этот div тегом тела.

-1