19

为什么在下面的代码中调用document.write函数validator()时表单元素（复选框和按钮）会从屏幕中删除？

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function validator() {
                if (document.myForm.thebox.checked)
                    document.write("checkBox is checked");
                else 
                    document.write("checkBox is NOT checked");
            }
        </script>
    </head>
    <body>
        <form name="myForm">
            <input type="checkbox" name ="thebox"/>
            <input type="button" onClick="validator()" name="validation" value="Press me for validation"/>
        </form>
    </body>
</html>
4

6 回答 6

62

document.write()用于写入文档流。

在您的情况下，当调用 onClick 处理程序时，流很可能已经关闭，因为您的文档已完成加载。

调用document.write()已关闭的文档流会自动调用document.open()，这将清除文档。

于 2012-06-03T21:12:09.447 回答
14

页面加载后调用的Adocument.write()将覆盖当前文档。

您想在文档中设置某些元素的文本。如果你添加一个

<p id="message"></p>

到你身体的尽头，然后你可以打电话

document.getElementById("message").innerHTML = "your text here";

或者使用 jQuery 库

$("#message").html("your text here");
于 2012-06-03T21:12:34.080 回答
12

document.write 在文档加载后调用会隐式调用document.open，这会清除当前文档。（与在页面加载时调用document.open相比，它将字符串插入到文档流中；它不会清除文档。）

document.write是古代 JavaScript 最古老的遗迹之一，通常应该避免。相反，您可能希望使用 DOM 操作方法来更新文档。

于 2012-06-03T21:13:39.230 回答
3

您可以使用

alert("Checkbox is checked");

或者，如果您将在页面上显示它，首先创建一个带有 id“消息”的元素（您可以编写任何您想要的内容，但请记住，id 在页面上必须是唯一的），例如

<div id="message"></div>

然后使用

document.getElementById("message").innerHTML = "Checkbox is checked";

或者如果您使用的是 jQuery：

$("#message").html("Checkbox is checked");

或者如果您使用的是支持控制台的浏览器（Firefox、Chrome 等）

console.log("Checkbox is checked");

代替

document.write("Checkbox is checked");
于 2012-06-03T21:23:33.227 回答
1 
        var x = document.createElement("div")
        document.body.appendChild(x)
于 2016-10-15T13:55:49.733 回答
0

document.write不是最好的方法，好像有任何，是的，DOM 操作正在发生或已经发生然后document.write()不能很好地工作，因为它修改了原始文档但忽略了对 DOM 树的任何更改。

还要记住，浏览器主要从 DOM 中显示内容，而不是原始文档。

于 2012-06-03T21:10:33.210 回答