Question

我正在尝试创建基于浏览器的操作系统。为了解决一些问题，我编写了以下代码。当我运行它时，开头的代码一直被遗忘。

<HTML>
 <HEAD>
  <TITLE>
   OS ... Loading
  </TITLE>
  <LINK REL="stylesheet" HREF="loader.css" />
 </HEAD>
 <BODY>
 <SCRIPT>
 setTimeout(function(){
    document.write(\"Booting\")
}, 1000);
setTimeout(function(){
    document.write(\" .\")
}, 2000);
setTimeout(function(){
    document.write(\".\")
}, 3000);
setTimeout(function(){
    document.write(\".\")
}, 4000);
setTimeout(function(){
    document.write(\" OK\")
}, 6000);
setTimeout(function(){
    document.write(\"<BR>Volume.php\")
}, 8000);
setTimeout(function(){
    document.write(\" .\")
}, 9000);
setTimeout(function(){
    document.write(\".\")
}, 10000);
setTimeout(function(){
    document.write(\".\")
}, 11000);
setTimeout(function(){
    document.write(\" OK\")
}, 13000);
setTimeout(function(){
    document.write(\"<BR>IE.php\")
}, 15000);
setTimeout(function(){
    document.write(\" .\")
}, 16000);
setTimeout(function(){
    document.write(\".\")
}, 17000);
setTimeout(function(){
    document.write(\".\")
}, 18000);
setTimeout(function(){
    document.write(\" OK\")
}, 20000);
</SCRIPT>

Answer 1

Document.write()的MDN文档非常清楚：

注意：当 document.write 写入文档 stream 时，关闭（加载）文档上的document.write会自动调用 document.open 将清除文档。

https://developer.mozilla.org/en-US/docs/Web/API/Document/open#Notes

使用DOM manipulation代替

e.g。在它最基本的地方：

＆＃13;

var h = document.createElement("h1");
var t = document.createTextNode("Unicorns!");
h.appendChild(t);
document.body.appendChild(h);

＆＃13;

Answer 2

扩展@ pero的回答

Element.innerHTML 属性设置或获取描述元素后代的HTML语法。
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

使用Element.innerHTML +=将预先格式化的html附加到元素使用Element.innerHTML =替换元素的预格式化html。

document.body.innerHTML += 'some text'

Node.textContent 属性表示节点及其后代的文本内容。
  ......

与innerHTML的区别

innerHTML返回HTML，如其名称所示。通常，为了在元素中检索或写入文本，人们使用innerHTML。应该使用textContent。由于文本未被解析为HTML，因此它可能具有更好的性能。而且，这避免了XSS攻击向量   https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

使用Element.textContent +=向文本附加文字。
使用Element.textContent =替换元素的文本。

document.body.textContent += 'some text'

更具体

如果要为某个元素追加/替换text / html，则需要选择该元素，然后对该元素使用上述方法

例如，

我们假设你有div，

<div class="screen"></div>

您要追加some text。在这里，我们选择带有screen类的第一个div（尽管您应该使用唯一的ID而不是类），然后将some text添加到其中。

document.querySelector('.screen').textContent += 'some text'

如果您要使用唯一ID，则可以选择

document.getElementById('screen');

现在，如果你要做这么多次，你应该缓存选择器，这样你就不会每次都查询dom。

var screen = document.querySelector('.screen');
screen.textContent += 'some ';
screen.textContent += 'text ';
screen.textContent += 'some more text';

关于innerHTML / textContent与DOM操作的说明

上述方法非常适合快速将文本或html附加到元素上，毫无疑问，它的执行速度比DOM操作更快。

这些测试最明显的结论是innerHTML比真实＆＃34;更快。所有浏览器中的W3C DOM方法。 W3C DOM表方法速度很慢，特别是在资源管理器中。

不止一次人们说只创建一次元素然后在必要时克隆它们会带来显着的性能提升。这些测试没有显示任何类似的东西。虽然在大多数浏览器中克隆速度比创建速度快，但两种方法之间的差异很小   http://www.quirksmode.org/dom/innerhtml.html

但 DOM操作有很多很棒的功能，这些功能无法通过我的答案中详述的方法轻松完成。对于复杂的操作，我肯定会推荐DOM Manipulation。

JS继续覆盖我以前的“代码”

2 个答案:

与innerHTML的区别

更具体

关于innerHTML / textContent与DOM操作的说明