Question

我试图用JavaScript做一些证明，但我看到一种行为，我认为它不一定是这样的。这是我的代码：

代码：

<!DOCTYPE html>
   <head>
       <meta charset = "utf-8"/>
       <title> Exercise prompt </title>
       <script type = "text/javascript">
          function disp_prompt()
          {
             var name = prompt("Please enter your name", "");

             if(name != null && name != "")
             {
                document.write("Hi " + name + " How are you?");
             }      
          }
       </script>
   </head>
   <body>
       <input type = "button" onclick = "disp_prompt()" value = "Show a prompt box." />
   </body>
</html>

预期结果：

当我点击按钮时，会出现提示，当我点击按钮＆＃34;接受＆＃34;时，功能document.write上的句子必须位于按钮下。

结果：

当prompt box显示时，我按下按钮＆＃34;接受＆＃34;，按钮消失，只显示功能document.write上的句子。

我可以在w3schools上看到以下句子：

将一些文本直接写入HTML文档

但我也可以看到另一个声明：

在HTML文档完全加载后使用document.write（）将删除所有现有HTML。

所以我无法理解document.write的真正目的。如果你想在HTML上写一些文字......为什么要删除剩下的元素？

是否有方法可以避免这种情况，并将其余元素保留在HTML上？

提前致谢！

Answer 1

document.write()的目的是将一些动态/计算内容插入到 页面的确切位置 。例如（虽然是一个人为的......）：

<html>
<body>
  hello, the date is <script>document.write(new Date())</script>
</body>
</html>

一种更灵活的方法，可让您在完全加载后修改页面内容，即使用专用元素来托管您的内容，并更改它innerHTML

＆＃13;

function clicked() {
  document.getElementById('dynamic').innerHTML = 'It was clicked!';
}

＆＃13;

<span onclick="clicked()">Click Me</span><br>
<span id="dynamic"></span>

＆＃13;

除此之外，有许多库可以帮助简化这一过程，最值得注意的是jQuery。

document.write的真正目的是什么？

1 个答案: