学习 document.write()
script 标签 在 head 中
<head>
<script>
document.write("<p>head create element</p>");
</script>
</head>
<body>
<p>first body element</p>
</body>
// 结果
// head create element
// first body elementscript 标签 在 body 中
- demo1
<script>
document.write("<p>body create element</p>");
</script>
<p>first body element</p>
<p>second body element</p>
<!-- 结果 -->
<!--
body create element
first body element
second body element
-->- demo2
<p>first body element</p>
<script>
document.write("<p>body create element</p>");
</script>
<p>second body element</p>
<!-- 结果 -->
<!--
first body element
body create element
second body element
-->外部 scirpt 在 head 中
<head>
<title>Document</title>
<script src="./index.js"></script>
</head>
<body>
<p>first body element</p>
</body>index.js
document.write("<p>head create element by script</p>");结果：
head create element by script
first body element外部 scirpt 在 body 中
- demo1
<body>
<script src="./index.js"></script>
<p>first body element</p>
<p>second body element</p>
</body>index.js
document.write("<p>body create element by script</p>");结果：
body create element by script
first body element
second body element- demo2
<body>
<p>first body element</p>
<script src="./index.js"></script>
<p>second body element</p>
</body>index.js
document.write("<p>body create element by script</p>");结果：
first body element
body create element by script
second body elementscirpt 引入外部 JS 添加 async 或者 defer,位置放在 head/body 中
<head>
<title>Document</title>
<script src="./index.js" async></script>
</head>
<body>
<p>first body element</p>
<p>second body element</p>
</body>或者
<head>
<title>Document</title>
</head>
<body>
<script src="./index.js" async></script>
<p>first body element</p>
<p>second body element</p>
</body>index.js
document.write("<p>body create element by script</p>");结果都是：
first body element
second body element浏览器提示
scirpt 引入外部 JS 添加 async 或者 defer,位置放在 head/body 中,修改外部 JS 代码
document.open();
document.write("<p>body create element by script</p>");
document.close();结果如下：
body create element by script从结果可以看出：外部引入的 JS，script 标签含有 async 或 defer 属性，则如果单纯写 document.write不执行；如果加了document.open()之后，会清空掉 body 中原有的 html 元素，只渲染document.write()
动态加载的 script 引入外部 JS,位置放在 head/body 中
<head>
<title>Document</title>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "./index.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<p>first body element</p>
<p>second body element</p>
</body>index.js
document.write("<p>body create element by script</p>");结果如下：
first body element
second body element浏览器提示：
动态加载的 script 引入外部 JS,位置放在 head/body 中,修改外部 JS 代码
index.js
document.open();
document.write("<p>body create element by script</p>");
document.close();结果如下：
body create element by script总结
- 在 script 标签中直接写代码，代码包含
document.write(),则
1、代码这head中，代码会相应操作会插入在 body 中子元素最前面；
2、代码在body中，代码会生成在 script 标签后面； -
script 引入外部 JS，代码包含
document.write(),则- 如果 script 标签属性中，有了
async、defer时,document.write() 不会执行;如若 document.write() 执行，必须document.open();执行结束之后，document.close();
document.open(); document.write(); document.close(); - 如果 script 标签属性中，有了
并且，执行时，会覆盖掉 body 中原有内容
- 使用 JS 代码动态生成 script 标签这种形式，就相当于 在 script 标签上 加了 async 属性，即 在这种情况下，引用的 JS 如果包含 document.write();则会阻塞；
注意
动态加载的 script，如果可执行，则会将代码格式化，图片如下：
如果不可执行，则会是 JSON 形式；
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。