web开发JS学习（二）关于document.write会覆盖文档流的理解

一开始在学习JS的时候看到说：

其实一开始并不是很理解这段话的意思，然后通过一些实例自己也改变了document.write的位置，发现结果还是会覆盖原文档流，下面通过实例看我的心路历程：

结果是覆盖的，说文档加载完之后再执行document.write会出现这种情况，那么我换一下位置呢，把这条语句放在文档前面看看：

My First Web Page

My First Paragraph.

点击这里

结果还是会覆盖掉，那么也不是这个顺序的问题，后来看到这里引用了button标签，一开始不点击的时候页面应该显示的效果如下图：

，现在大概明白了，我们的document.write其实写入进去文档的位置其实是在咱们点击button之后的输出流里面，也正是上面那句话的意思，前面的文档流h1以及p标签里面的文档都已经加载完毕了，之后咱们进行的操作是点击button然后出现“会覆盖原文档流吗？”这段话，所以才会出现这种现象，咱们再看看正常的实例：

正常显示经过JS写入文档，而不会覆盖住原文档流的实例

刚健身回来
             //通过id属性来写入文档
写下博客玩玩


点击按钮看看我今天锻炼了啥

结果：

也就是说，如果是通过加入button这种在加载文档流之后才进行操作的标签时，千万不要用document.write这条语句。

这样应该就很好理解了吧，下次如果想写入文档，并且不想覆盖原文档流，就用上面的脚本写就行了，注释也解释的很清楚，都是套路。