Javascript 什么是innerHTML，document.write是如何工作的？_Javascript_Html

Javascript 什么是innerHTML，document.write是如何工作的？

javascript html

Javascript 什么是innerHTML，document.write是如何工作的？,javascript,html,Javascript,Html,考虑以下几点： <!DOCTYPE HTML> <html lang="en-US"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" s

考虑以下几点：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        document.write('<script type="text/javascript" src="script2.js"></scr'+'ipt>');
        document.write('<script type="text/javascript" src="script3.js"></scr'+'ipt>');
        console.log(document.getElementsByTagName("script").length + " Scripts");
        console.log(document.head.innerHTML);
    </script>
</head>
<body>
</body>
</html>


文件。写（“”）；
文件。写（“”）；
log（document.getElementsByTagName（“脚本”）.length+“脚本”）；
log（document.head.innerHTML）；

您希望console.log包含什么内容？我希望您能得到我所期望的两个结果之一：

4个脚本

以及头部的innerHTML中显示的两个现有或全部四个脚本标记（

document.write

也可以写入身体，因此可以期望脚本标记作为身体的子对象被注入）

问题是，在Chrome和IE11中，通过document.write添加的第一个脚本标记显示在头部的

innerHTML

中，但第二个不是，DOM查询结果是

3个脚本

有人能详细说明一下吗？

这是因为您在另一个脚本标记中编写了一个脚本标记，并最终创建了无效标记（我可能错了，但我的理论与您看到的相符）

1--->
2---> 
3--->

也许吧

更新

在玩了一会儿之后，我同意@mplungjan，这是一个时间问题。这正如预期的那样有效。脚本计数现在为obvs 5

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        document.write('<script type="text/javascript" src="script2.js"></scr'+'ipt>');
        document.write('<script type="text/javascript" src="script3.js"></scr'+'ipt>');
    </script>
    <script type="text/javascript">
        console.log(document.getElementsByTagName("script").length + " Scripts");
        console.log(document.head.innerHTML);
    </script>
</head>
<body>
</body>
</html>


文件。写（“”）；
文件。写（“”）；
log（document.getElementsByTagName（“脚本”）.length+“脚本”）；
log（document.head.innerHTML）；

让它有机会用Chrome渲染作品：

在脚本中，我有script.js:x=1、script2.js:y=1和script3.js:z=1

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        console.log("after 1",x);
        document.write('<script type="text/javascript" src="script2.js"><\/script>');
        document.write('<script type="text/javascript" src="script3.js"><\/script>');
        setTimeout(function() {
          console.log(document.getElementsByTagName("script").length + " Scripts");
          console.log(document.head.innerHTML);
          console.log("after 3",x,y,z)
        },100); // the milliseconds MAY need to be higher over the net
    </script>
</head>
<body>
</body>


console.log（“1”之后，x）；
文件。写（“”）；
文件。写（“”）；
setTimeout（函数（）{
log（document.getElementsByTagName（“脚本”）.length+“脚本”）；
log（document.head.innerHTML）；
console.log（“3”，x，y，z之后）
},100); // 在网络上，毫秒可能需要更高

结果:

4 Scripts

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
    document.write('<script type="text/javascript" src="script2.js"><\/script>');
    document.write('<script type="text/javascript" src="script3.js"><\/script>');
    setTimeout(function() {
      console.log(document.getElementsByTagName("script").length + " Scripts");
      console.log(document.head.innerHTML);
      console.log("after 3",x,y,z)
      },10)
</script><script type="text/javascript" src="script2.js"></script><script type="text/javascript" src="script3.js"></script>

after 3 1 1 1

4个脚本
文件。写（“”）；
文件。写（“”）；
setTimeout（函数（）{
log（document.getElementsByTagName（“脚本”）.length+“脚本”）；
log（document.head.innerHTML）；
console.log（“3”，x，y，z之后）
},10)
311之后

使用

document.write（）

是一种古老的做法，您应该使用DOM：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        // Child 1
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'script2.js';
        document.getElementsByTagName('head')[0].appendChild(script);
        //Child 2
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'script3.js';
        document.getElementsByTagName('head')[0].appendChild(script);

        console.log(document.getElementsByTagName("script").length + " Scripts");
        console.log(document.head.innerHTML);
    </script>
</head>
<body>
</body>
</html>


//儿童1
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src='script2.js'；
document.getElementsByTagName（'head'）[0].appendChild（脚本）；
//儿童2
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src='script3.js'；
document.getElementsByTagName（'head'）[0].appendChild（脚本）；
log（document.getElementsByTagName（“脚本”）.length+“脚本”）；
log（document.head.innerHTML）；

它返回

4个脚本

对

计数的一种可能解释是，通过document.write添加的脚本是同步执行的。因此：

脚本引擎执行包含document.write的脚本块

脚本引擎将第一个脚本添加到DOM中

脚本引擎不会将第二个脚本添加到DOM中——它必须等待第一个脚本下载并执行。毕竟，第一个脚本有可能执行

document.write（“为什么关闭请求？这是一个完全有效的问题，甚至有5个upvotes@mplungjan向上投票并不总是表明问题的适当性（未投票）我将script.js设置为x=1，script2.js设置为y=1，script3.js设置为z=1，我发现y是未定义的，我很好奇，并在其中发布了一个链接。似乎可以安全地假设这样做时的行为是未定义的。使用script.addEventListener（'load'，function（）{console.log（'Now the script show should to load and ready to go'））
。用于使其valid@mplungjan不是吗？它仍然使它有效。但是请看我的答案，了解不一致的原因（附言：我没有投反对票）。如果这是真的，那么几乎所有document.write（）的用法
将生成无效的代码。在执行脚本之前，将分析整个脚本元素。document.write（）
将在脚本元素之后立即放置内容。（或者，如果您的意思是脚本中的字符串
将导致问题，那么您仍然错了，因为脚本元素已定义。）（在HTML 4术语中）因为包含CDATA，所以对HTML解析器来说只有结束标记才重要（在HTML 5中只有脚本结束标记才重要）。请投票人解释原因。是的@Quentin，我的第一个答案是错误的。旁注。当我将脚本3更改为z=1+y
时，我得到了预期的1,1,2。我认为最好使用实际的“onload”脚本元素的事件，而不是任意延迟。document.write是sencha touch 2“测试”微加载程序所做的：（看这里
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        // Child 1
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'script2.js';
        document.getElementsByTagName('head')[0].appendChild(script);
        //Child 2
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'script3.js';
        document.getElementsByTagName('head')[0].appendChild(script);

        console.log(document.getElementsByTagName("script").length + " Scripts");
        console.log(document.head.innerHTML);
    </script>
</head>
<body>
</body>
</html>