Question

为什么在函数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>

Answer 1

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

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

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

Answer 2

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

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

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

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

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

或者使用jQuery库

$("#message").html("your text here");

Answer 3

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

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

Answer 4

你可以使用

alert("Checkbox is checked");

或者如果你要在页面上显示它，首先要创建一个带有id“message”的元素（你可以写任何你想要的东西，但要记住，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");

Answer 5

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

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

Answer 6

function DisplayWrite(a) {
    if (document.body) {
        var x = document.createElement("div")
        document.body.appendChild(x)
        x.innerHTML = "</div>" + a
    } else {
        document.writeclear(a)
    }
}

var document = new Object()
document.writeclear = document.write
document.write = function(x) {DisplayWrite(x)}

document.write清除页面

6 个答案: