Question

我红了这个：

write（）方法主要用于测试：如果在a之后使用它 HTML文档已完全加载，它将删除所有现有的HTML。

所以我决定测试一下，我写了这段代码：

<!doctype html> 
<html>
<head>
 <meta charset="utf-8">
</head>
    <body>
    <p>I'm TEST which should be a deleted?</p>
        <script>
            var drink = "Red bull";
            var lyrics = "";
            var cans = 99;

            while(cans > 0)
            {
                lyrics += cans + " cans of " + drink + " on the wall <br>";   
                cans--;  
            }
            document.write(lyrics);
        </script>
    </body>
</html>

如您所见，我添加了<p>I'm TEST which should be a deleted?</p> 之后我在我的document.write标签之间调用script，该标签应删除包含此段落的所有现有HTML？

但输出是下一个：

但段落仍在那里，不应该通过以下句子删除：

如果在HTML文档完全加载后使用它，它将被删除所有现有的HTML。

Answer 1

在加载页面时调用

document.write(lyrics);。

在函数中声明它：

<script>  
  function writeData(){
    document.write(lyrics);
  }
</script>

并在文档完全加载时调用该函数你应该看到另一种行为。

例如，点击按钮：

<button onclick="writeData()">WriteData</button>

Answer 2

当脚本运行时，文档尚未完成加载，因为脚本不在文档的末尾（在</html>结束标记之后）。

document.write()只会在处理完所有标记后运行时删除现有内容，无论是在控制台中还是在事件后触发的事件处理程序中。

Answer 3

你基本上自己回答了

HTML文档完全加载后

如果你用超时测试它，你会看到它会替换段落（注意：这只是一个例子，如果它需要功能，你绝对不应该像这样强制加载）

        setTimeout(function() {
          while(cans > 0)
          {
              lyrics += cans + " cans of " + drink + " on the wall <br>";   
              cans--;  
          }
          document.write(lyrics);
        }, 2000);

Answer 4

使用此代码对其进行测试。您将了解document.write（）的实际作用。单击该按钮后，HTML将隐藏，并且您只会看到11（document.write（5 + 6））答案。这就是“ write（）方法主要用于测试的方法：如果在HTML文档完全加载后使用它，它将删除所有现有的HTML。”手段。

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

document.write（）应该在我的页面加载后删除所有现有的html？

4 个答案: