By Félix Saparelli


2010-11-22 00:56:30 8 Comments

I'm looking for a way to remove the entire content of a web page using pure Javascript -- no libraries.

I tried:

document.documentElement.innerHTML = "whatever";

but that doesn't work: it replaces the inside of the <html/> element. I'm looking at replacing the entire document, including if possible the doctype and <?xml declaration.

9 comments

@Kursat Turkay 2018-01-12 20:25:05

document.documentElement.innerHTML='';
document.open();

The Document.open() method opens a document for writing. if you dont use open method, you cant modify Document after set innerhtml to empty string

@Fiddles 2018-01-12 20:52:03

I believe this will still leave the doctype node hanging around, but:

document.documentElement.remove()

or the equivalent

document.getElementsByTagName("html")[0].remove()

@Ben 2010-11-22 01:06:44

var i = document.childNodes.length - 1;

while (i >= 0) {
  console.log(document.childNodes[i]);
  document.removeChild(document.childNodes[i--]);
}

Removes everything (doctype also) on FF 3.6, Chrome 3.195, and Safari 4.0. IE8 breaks since the child wants to remove its parent.


Revisiting a while later, could also be done like this:

while (document.firstChild) {
  document.removeChild(document.firstChild);
}

@Félix Saparelli 2010-11-22 01:28:58

Great, but you still can't change the doctype... which doesn't matter much. Firefox crashed when I tried...

@Ben 2010-11-22 01:49:19

Is your question "How to change the doctype" or "Remove all content with pure JS"?

@SNAIL007500 2016-08-04 04:03:43

REMOVE EVERYTHING BUT --- !DOCTYPE html ---

var l = document.childNodes.length;    
while (l > 1) { var i = document.childNodes[1]; document.removeChild(i); l--; }

TESTED ON FIREFOX WEB INSPECTOR - childNodes[1] IS --- !DOCTYPE html ---

@alex 2010-11-22 01:01:40

I think a browser rightfully assumes a page with content-type text/html will always be a web page - so whilst you may do something like...

document.body.innerHTML = '';

It will still have some HTML hanging around.

You could try...

document.documentElement.innerHTML = '';

...which left me with <html></html>.

Yi Jiang did suggest something clever.

window.location = 'about:blank';

This will take you to a blank page - an internal mechanism provided by most browsers I believe.

I think however the best solution is to use document.open() which will clear the screen.

@Félix Saparelli 2010-11-22 01:05:51

The first updated answer was half of what I was looking for. But I guess changing the doctype is asking a bit too much...

@alex 2010-11-22 01:08:15

@passcod Once you change the doctype too, you are changing how the browser will render your HTML/CSS. This will probably entail a page reload. I don't think you can change a doctype on the fly.

@iman 2013-10-20 08:14:38

@alex changing window.location to 'about:blank' has a problem with IE specialy IE10 because some addons when detect about:blank page fill it with their contents

@Mathias Lykkegaard Lorenzen 2014-10-24 22:30:26

My solution seems more appropriate, and avoids the about:blank hack.

@alex 2014-10-26 22:02:09

@MathiasLykkegaardLorenzen I forgot to add that to my answer, as I suggested here.

@Mathias Lykkegaard Lorenzen 2014-10-24 19:17:32

According to Dotoro's article on the document.clear method, they (since it's deprecated) recommend calling document.open instead, which clears the page, since it starts a new stream.

This way, you avoid the nasty about:blank hack.

@PleaseStand 2010-11-22 01:28:50

After the page has already fully loaded:

document.write('');
document.close();

@alex 2013-10-20 10:00:49

You could just use document.open().

@Darko Z 2010-11-22 01:06:19

Im just curious as to why you'd want to do that. Now theres no way that I know of to replace absolutely everything down to the doctype declaration but if you are wanting to go to those lengths why not redirect the user to a specially crafted page that has the template you need with the doctype you need and then fill out the content there?

EDIT: in response to comment, what you could do is strip all content then create an iframe make it fill the entire page, and then you have total control of the content. Be aware that this is a big hack and will probably be very painful - but it would work :)

@Félix Saparelli 2010-11-22 01:10:46

To all who asked the reasons... This seemed like an easy way of stripping everything out and starting from scratch in a userscript... I can include whatever JS code I want, and it will run in the page, not in a sandbox. The doctype thing is for when I want to use xhtml on a html website.

@Félix Saparelli 2010-11-22 01:19:43

In fact, Steve's solution is great... just have to tweak some stuff to include the doctype...

@Félix Saparelli 2010-11-22 01:24:26

It's for userscripts. Ofc I don't need IE support. =)

@Alohci 2010-11-22 02:02:00

@passcod - Changing the doctype is pointless. You wont end up with an XML document - only an HTTP content-type can do that. And if your building your DOM in javascript, you're not going to validate it either.

@John Hartsock 2010-11-22 01:02:31

I believe this will do it

document.clear()  //deprecated

window.location = "about:blank"  //this clears out everything

@alex 2010-11-22 01:04:01

That didn't work for me, but I did try it on jsbin.com which may be doing something else behind the scenes.

@John Hartsock 2010-11-22 01:05:04

@alex ..yeah I just realized document.clear() has been deprecated.

@iman 2013-10-20 08:17:43

@John Hartsock changing window.location to 'about:blank' has a problem with IE specialy IE10 because some addons when detect about:blank page fill it with their contents

@David Spector 2019-01-18 20:50:35

Five years later, it is not so important that lots of things still don't work in IE, since MS has stopped development of IE in favor of Edge.

Related Questions

Sponsored Content

93 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 6242584 View
  • 7797 Score
  • 93 Answer
  • Tags:   javascript arrays

38 Answered Questions

[SOLVED] How can I make a div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1364395 View
  • 1980 Score
  • 38 Answer
  • Tags:   html css width

42 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

85 Answered Questions

[SOLVED] Get all unique values in a JavaScript array (remove duplicates)

61 Answered Questions

[SOLVED] How to replace all occurrences of a string?

17 Answered Questions

[SOLVED] Remove element by id

  • 2010-08-01 18:47:14
  • Zaz
  • 1445276 View
  • 1100 Score
  • 17 Answer
  • Tags:   javascript

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 933865 View
  • 1788 Score
  • 31 Answer
  • Tags:   html css html-table

8 Answered Questions

[SOLVED] HTML5 Canvas vs. SVG vs. div

8 Answered Questions

[SOLVED] What is the correct syntax of ng-include?

Sponsored Content