Javascript 使用纯JS删除所有内容

我正在寻找一种使用纯Javascript（无库）删除整个网页内容的方法

我试过：

document.documentElement.innerHTML = "whatever";

---

但这不起作用：它替换了

元素的内部。我正在考虑替换整个文档，包括

doctype

和

如果可能的话，我认为浏览器正确地假设一个内容类型为
text/html
的页面将始终是一个网页-因此，尽管您可能会执行以下操作

document.body.innerHTML = '';

它仍然会有一些HTML挂起

你可以试试

document.documentElement.innerHTML = '';

…这给我留下了

他确实提出了一些聪明的建议

window.location = 'about:blank';

这将把你带到一个空白页——我相信大多数浏览器都提供了一种内部机制

不过，我认为最好的解决方案是使用
document.open（）
，这样可以清除屏幕。
我相信这样做就可以了

document.clear()  //deprecated

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

我只是好奇你为什么要那样做。现在，据我所知，没有任何方法可以完全替换doctype声明中的所有内容，但是如果您想要达到这些长度，为什么不将用户重定向到一个精心编制的页面，该页面包含您需要的doctype模板，然后在那里填写内容呢

编辑：对于评论，您可以做的是剥离所有内容，然后创建一个iframe，使其填充整个页面，然后您就可以完全控制内容。请注意，这是一个巨大的黑客攻击，可能会非常痛苦——但它会奏效：）

删除FF 3.6、Chrome 3.195和Safari 4.0上的所有内容（也包括doctype）。IE8中断，因为孩子想删除其父项


稍后再次访问，也可以这样做：

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

页面已完全加载后：

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

根据，他们建议调用
document.open，这会清除页面，因为它会启动一个新的流

这样，您就可以避免讨厌的
关于：blank的
黑客攻击。
删除除-----之外的所有内容！DOCTYPE html---

在FIREFOX WEB INSPECTOR上测试-childNodes[1]是---！DOCTYPE html---

open（）方法打开一个文档进行写入。
如果不使用open方法，则在将innerhtml设置为空字符串后无法修改文档
我相信这仍然会使doctype节点挂起，但是：

document.documentElement.remove（）

或同等品

document.getElementsByTagName（“html”）[0]。remove（）
可以同时删除
元素（）和doctype（）

或者，可以使用循环删除
文档的所有子项

while(document.firstChild) document.firstChild.remove();

或者也可以工作。

如果您使用jQuery，下面是您的解决方案

<div id="mydiv">some text</div>
<br><br>
<button id="bn" style="cursor:pointer">Empty div</button>

<script type="text/javascript">
$(document).on('click', '#bn', function() {
  $("#mydiv").empty();
  $("#bn").empty().append("Done!");
});
</script>

<div id="purejar">some text</div>
<br><br>
<button id="bnjar" onclick="run()" style="cursor:pointer">Empty div</button>

<script type="text/javascript">
var run = function() {
  var purejar = document.getElementById("purejar");
  var bn = document.getElementById("bnjar");
  purejar.innerHTML = '';
  bn.innerHTML = 'Done!';
}
</script>

一些文本



空div
$（文档）。在（'click'，'#bn'，函数（）上{
$（“#mydiv”）.empty（）；
$（“#bn”）.empty（）.append（“Done！”）；
});

如果您使用的是javascript，下面是您的解决方案

<div id="mydiv">some text</div>
<br><br>
<button id="bn" style="cursor:pointer">Empty div</button>

<script type="text/javascript">
$(document).on('click', '#bn', function() {
  $("#mydiv").empty();
  $("#bn").empty().append("Done!");
});
</script>

<div id="purejar">some text</div>
<br><br>
<button id="bnjar" onclick="run()" style="cursor:pointer">Empty div</button>

<script type="text/javascript">
var run = function() {
  var purejar = document.getElementById("purejar");
  var bn = document.getElementById("bnjar");
  purejar.innerHTML = '';
  bn.innerHTML = 'Done!';
}
</script>

一些文本



空div
var run=function（）{
var purejar=document.getElementById（“purejar”）；
var bn=document.getElementById（“bnjar”）；
purejar.innerHTML=''；
bn.innerHTML='Done！'；
}
位置='about:blank'
目的是什么？Javascript在DOM上工作，这是一个比底层HTML序列化更高的级别（即
@Yi Jiang的工作位置，但我实际上想留在同一个域上…@Yi Jiang+1以获得一个好的建议（如果你想留下它作为一个答案，我将删除我的编辑：））我哀悼静态网页的通过，通过查看任何网页的源代码来了解其构造方式和工作原理。这对我来说不起作用，但我在jsbin.com上尝试过，它可能在幕后做了其他事情。@alex..是的，我刚刚实现了document.clear（）已被弃用。@John Hartsock将window.location更改为“about:blank”与IE特别是IE10存在问题，因为某些插件在检测到about:blank页面时会将其内容填充五年后，IE中仍有许多内容不起作用并不重要，因为微软已经停止了IE的开发，取而代之的是Edge。第一次更新的答案是我想要的一半。但是我猜更改
doctype
的要求有点太高了…@passcod一旦您也更改了doctype，您就改变了浏览器呈现HTML/CSS的方式。这可能需要重新加载页面。我不认为您可以随时更改doctype。@alex将window.location更改为“about:blank”与IE特别是IE10有问题，因为某些加载项在检测about:blank页面时会用其内容填充它我的解决方案似乎更合适，并避免了关于：blank的
黑客攻击。@MathiasLykkegaardLorenzen我忘了在我的答案中添加这一点，正如我所建议的。对于所有询问原因的人。。。这似乎是一种简单的方法，可以从用户脚本中剥离所有内容并从头开始。。。我可以包含任何我想要的JS代码，它将在页面中运行，而不是在沙箱中运行。当我想在html网站上使用xhtml时，
doctype
就可以了。。。只需调整一些内容，以包括
doctype
…它是用于用户脚本的。Ofc我不需要IE支持。=）@passcod-更改doctype是毫无意义的。您不会得到一个XML文档——只有HTTP内容类型才能做到这一点。如果您使用javascript构建DOM，您也不会验证它。很好，但您仍然无法更改doctype。。。这并不重要。Firefox在我尝试时崩溃了…您的问题是“如何更改doctype”还是“使用纯JS删除所有内容”？您可以使用
document.open（）
。
<div id="mydiv">some text</div>
<br><br>
<button id="bn" style="cursor:pointer">Empty div</button>

<script type="text/javascript">
$(document).on('click', '#bn', function() {
  $("#mydiv").empty();
  $("#bn").empty().append("Done!");
});
</script>

<div id="purejar">some text</div>
<br><br>
<button id="bnjar" onclick="run()" style="cursor:pointer">Empty div</button>

<script type="text/javascript">
var run = function() {
  var purejar = document.getElementById("purejar");
  var bn = document.getElementById("bnjar");
  purejar.innerHTML = '';
  bn.innerHTML = 'Done!';
}
</script>