简体   繁体   English

Document.write 清除页面

[英]Document.write clears page

Why in the code below upon the call of document.write in the function validator() the form elements (the checkbox and button) are removed from screen?为什么在下面的代码中,在调用函数validator()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() is used to write to the document stream . document.write()用于写入文档

In your case, the stream is most probably already closed when the onClick handler is called, because your document has finished loading.在您的情况下,当调用 onClick 处理程序时,流很可能已经关闭,因为您的文档已完成加载。

Calling document.write() on a closed document stream automatically calls document.open() , which will clear the document.调用document.write()一个封闭的文档流自动调用document.open()这将清除文件。

A document.write() called after the page loads will overwrite the current document.页面加载后调用的document.write()将覆盖当前文档。

You want to set the text of some element within your document.您想设置文档中某个元素的文本。 If you add a如果你添加一个

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

to the end of your body, then you can call到你身体的尽头,然后你可以打电话

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

Or with the jQuery library或者使用 jQuery 库

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

Calling document.write after the document has been loaded implicitly calls document.open , which clears the current document.document.write加载调用document.write隐式调用document.open ,这会清除当前文档。 (Compare to calling document.open while the page is loading, which inserts the string into the document stream; it does not clear the document.) (与在页面加载时调用document.open ,后者将字符串插入到文档流中;它不会清除文档。)

document.write is one of the oldest vestiges of ancient JavaScript, and should generally be avoided. document.write是古代 JavaScript 最古老的遗迹之一,通常应该避免。 Instead, you probably want to use DOM manipluation methods to update the document.相反,您可能希望使用 DOM 操作方法来更新文档。

you can use您可以使用

alert("Checkbox is checked");

or if you will be displaying it on page, first create an element with an id "message" (you can write anything you want, but remember, id's have to be unique on the page) like或者,如果您要在页面上显示它,首先创建一个带有 id 为“message”的元素(您可以编写任何您想要的内容,但请记住,id 在页面上必须是唯一的),例如

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

and then use然后使用

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

or if you are using jQuery:或者如果您使用的是 jQuery:

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

or if you are using a console enabled browser (Firefox, Chrome etc.)或者如果您使用的是支持控制台的浏览器(Firefox、Chrome 等)

console.log("Checkbox is checked");

instead of代替

document.write("Checkbox is checked");
        var x = document.createElement("div")
        document.body.appendChild(x)

document.write is not best way to go as if there is any, yes ANY, DOM manipulation happening or happened already then document.write() does not work very well as it modifies original document but ignores any changes to DOM tree. document.write不是最好的方法,好像有任何,是的,DOM 操作正在发生或已经发生,然后document.write()不能很好地工作,因为它修改原始文档但忽略对 DOM 树的任何更改。

Also remember that browser displays things primarily from DOM, not from original document.还请记住,浏览器主要显示来自 DOM 的内容,而不是来自原始文档。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM