logo标签列表

文档写入（document.write()）应该在我的页面加载后删除所有已有的HTML吗？

javascripthtmldom
3

我读到了这个:

write()方法主要用于测试:如果在 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>我是测试，应该被删除吗？</p> 然后我在script标签之间调用了document.write，这应该会删除所有现有的html，包括这个段落？
但是输出是下面这样的： enter image description here 但是段落仍然存在，根据以下句子，它不应该被删除吗？
如果它在HTML文档完全加载后使用，它将删除所有现有的HTML。
如果解析器到达 </html>，则页面将被呈现。 - Jonas Wilms
4个回答
5

document.write(lyrics);在页面加载期间被调用。

在函数中声明它：

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

需要在文档完全加载后的某个时刻调用该函数，这样您应该会看到另一种行为。

例如，通过按钮点击：

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

你基本上已经自己回答了这个问题。

当HTML文档完全加载后

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

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

使用此代碼進行測試，您將了解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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接