javascript:同一脚本的不同行为

Question

我有一些关于javascript行为的问题(我现在正在从w3schools那里学习javascript )，我看到了两个简单代码的例子，但是我不明白为什么代码的行为不同:第一个例子：

​

<!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“，而在第一个示例中，所有文档内容都被追加到文档中？执行脚本时有什么不同吗？

Ps:我知道这不是问这个问题的合适地方，但是如果你知道一本更好的学习javascript的书或教程，请把它写在评论中(我是c#后端开发人员和前安卓开发人员)。

Answer 1

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

以下是mdn document.write中的单词

如果document.write()调用直接嵌入到HTML代码中，那么它将不会调用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>

联署材料：

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

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