Remove body element
How to remove HTML <body> element with all of its content?
var e = document.getElementsByTag('html');
开发者_开发百科e.removeChild('body');
Does not work.
The simple solution would be
document.body.innerHTML = "";
But why on earth would you want to do this?
By the way:
var e = document.getElementsByTag('html');
should be
var e = document.getElementsByTagName('html')[0];
and
e.removeChild('body');
should be
e.removeChild(document.body);
- getElementsByTagName returns a collection of nodes, not a single node
- removeChild takes a node, not a string containing a tag name
var e = document.body;
e.parentNode.removeChild(e);
… however HTML documents require a body element, so this may have unexpected behavior.
...
document.body.parentNode.removeChild(document.body);
I think this will remove it
var html = document.getElementsByTagName('html')[0];
var body = document.getElementsByTagName('body')[0];
html.removeChild(body);
The body itself has a method which does just that:
document.body.remove();
document.body.parentNode.removeChild(document.body)
or
document.body = document.createElement("body")
or
while(document.body.childNodes.length != 0) {
document.body.removeChild(document.body.childNodes[0])
}
Try this code it will remove all the content of body tag on click on the button
And if you want to remove content onload then use this onload="document.body.innerHTML = '';"
<html>
<body>
This is example Text<br>
<button onclick="document.body.innerHTML = '';">Click me to remove body contents</button>
</body>
</html>Several people on this page have asked why one might even wish to remove a <body> element from an HTML Document.
Admittedly, it's a seldom-seen approach, but it's almost always because one wishes to remove the current <body> from a document (while keeping the <head>) and then create a new <body> element (to follow the same <head> as before).
So why not, simply empty the existing <body> element via:
document.body.innerHTML = '';
or
while (HTMLSourceTab.document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
The answer might be:
If the HTML Document in question is being opened in a new browser tab, these processes (above) can only execute after the DOMContentLoaded event fires.
And they may not execute quickly enough to prevent a brief Flash Of Legacy Body.
Whereas:
document.body.remove();
will normally execute quickly enough after DOMContentLoaded to prevent that flash.
Once the legacy <body> has been removed, a new <body> can be created and added via:
let newBody = document.createElement('body');
document.documentElement.appendChild(newBody);
or (if adding an empty <body>) simply:
document.body = document.createElement('body');
Full code for opening an existing document in a new tab, removing the existing <body> and adding a new <body>:
myNewTab = window.open(myNewTabURL, '_blank');
myNewTab.addEventListener('DOMContentLoaded', () => {
myNewTab.document.body.remove();
setTimeout(() => myNewTab.document.body = myNewTab.document.createElement('body'), 800);
});
myNewTab.focus();
加载中,请稍侯......
精彩评论