How do you enclose unknown HTML in a div with plain Javascript?
Question
I have an HTML page that has varying types of content. I would like to make a javascript function that when run encloses anything inside the <body> tag with a <div id="content-container"> . Then I want to be able to add a <div id="verifying"></div> that new <div> . I think I know how to do this with jQuery, but I need to do it with plain Javascript.
Any idea as to how this would be done?
2 answers
solution1
5 ACCPTED 2011-09-15 01:33:18
This is how I might do it.
var body = document.body;
var contentContainer = document.createElement('div');
contentContainer.id = 'content-container';
var node;
while (node = body.firstChild) {
contentContainer.appendChild(node);
}
body.appendChild(contentContainer);
var verifying = document.createElement('div');
verifying.id = 'verifying';
contentContainer.appendChild(verifying);
jsFiddle .
solution2
0 2011-09-15 01:33:54
I haven't tested, but I imagine that you can take the innerHTML of document and set it to be itself along with whatever wrapper string (or div) you want.
Something along the lines of:
body = methodToLocateBodyInTheDom();
body.innerHTML = "<div id='content-container'>" + body.innerHTML + "</div>"
There are probably better ways, but I think something of that nature sure work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.