javascript：同一脚本的不同行为

Question

我有一些关于 javascript 行为的问题（我现在正在 javascript 从 w3schools 学习）并且我看到了两个简单代码的例子，但我不明白为什么代码表现不同：第一个例子：

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

第二个例子：

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

为什么在第二个示例中所有文档内容都替换为“11”，而在第一个示例中将“11”附加到文档中？脚本执行的时候有区别吗？

Ps：我知道这不是问这个问题的地方，但是如果你知道更好的书或教程来学习javascript，请在评论中提出（我是c# 后端开发人员和前 android 开发人员）。

Answer 1

这是因为在第一个示例中，浏览器不会自动调用document.open，但第二个会调用。

这里是来自mdn的话document.write

If the document.write() call is embedded directly in the HTML code, then it will not call document.open().

基本上document.open只需清除文档中的所有内容即可。

检查这些关于 document.write 和 document.open
的文档 mdn document.write
mdn document.open

谢谢哥们！好问题！之前没有注意到这一点。

Answer 2

文档加载完成后，您将无法使用 document.write。如果这样做，浏览器将打开一个新文档来替换当前文档。

使用 innerHTML 属性将 HTML 代码放入元素中：

 <h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 <span id='r'></span>
 <button id="add"">Try it</button>

JS:

document.getElementById("add").onclick = add;
function add(){
   document.getElementById("r").innerHTML=5+6;
}

http://jsfiddle.net/sharif084/ktx0rmuf/

javascript：同一脚本的不同行为

javascript: different behaviour for the same script

javascript

document.write