Javascript Document.write清除页面_Javascript_Html_Dom Events

Javascript Document.write清除页面

javascript html

Javascript Document.write清除页面,javascript,html,dom-events,Javascript,Html,Dom Events,为什么在下面的代码中调用document.write函数验证器时，复选框和按钮的表单元素会从屏幕上删除 <!DOCTYPE html> <html> <head> <script type="text/javascript"> function validator() { if (document.myForm.thebox.checked)

为什么在下面的代码中调用document.write函数验证器时，复选框和按钮的表单元素会从屏幕上删除

<!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>

document.write并不是最好的方法，因为它会修改原始文档，但会忽略对DOM树的任何更改

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

document.write用于写入文档流

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

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

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

您希望设置文档中某个元素的文本。如果你加一个

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

或者使用jQuery库

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

加载文档后调用document.write将隐式调用document.open，从而清除当前文档。与加载页面时调用document.open进行比较，后者将字符串插入文档流；它没有清除文档

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

您可以使用

alert("Checkbox is checked");

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

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

或者，如果您正在使用jQuery：

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

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

console.log("Checkbox is checked");

而不是

document.write("Checkbox is checked");

它应该是$body.appendyourtexthere；改变了一些事情-使用id设置a的html，而不是仅仅附加到正文中-这有点干净way@JeromeWAGNER-否。从您引用的页面读取链接：打开文档流进行编写。如果目标中存在文档，此方法将清除它。我已修复它！修正了文档。写！我删除了，只从var x抓取了行。。。到x.innerHTML…，我发现这在我的应用程序中是可行的。我还必须加上分号，这正是我想要的：document.open；谢谢

console.log("Checkbox is checked");

document.write("Checkbox is checked");

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)}