Document.write очищает страницу

Почему в коде ниже при вызове 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>

Ответ 1

document.write() используется для записи в поток документа.

В вашем случае поток, скорее всего, уже закрыт, когда вызывается обработчик onClick, потому что ваш документ завершил загрузку.

Вызов document.write() в закрытом потоке документа автоматически вызывает document.open(), который очистит документ.

Ответ 2

Вызов document.write после того, как документ был загружен, неявно вызывает document.open, который очищает текущий документ. (Сравните с вызовом document.open во время загрузки страницы, которая вставляет строку в поток документа, не очищает документ.)

document.write является одним из старейших остатков древнего JavaScript и, как правило, следует избегать. Вместо этого вы, вероятно, захотите использовать методы DOM-манипуляции для обновления документа.

Ответ 3

A document.write(), вызываемый после загрузки страницы, перезапишет текущий документ.

Вы хотите установить текст некоторого элемента в документе. Если вы добавите

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

до конца вашего тела, вы можете вызвать

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

Или с помощью библиотеки jQuery

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

Ответ 4

вы можете использовать

alert("Checkbox is checked");

или если вы будете отображать его на странице, сначала создайте элемент с сообщением "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");

Ответ 5

document.write не лучший способ, как если бы он был, да ЛЮБОЙ, манипуляция DOM происходит или уже происходит, тогда document.write() работает не очень хорошо, поскольку он изменяет исходный документ, но игнорирует любые изменения в дереве DOM.

Также помните, что браузер отображает вещи в основном из DOM, а не из исходного документа.

Ответ 6

document.write только для времени загрузки страницы. после этого, если мы будем использовать эту функцию, перезагружаем вывод не страницы. почему он скрывает экран. Я реализовал это решение, когда пользователю не нужно отправлять запрос на сервер. Это можно сделать на стороне клиента, используя html-редактор на

http://www.programmingduniya.com/htmleditor/index.php

Используя ajax, мы можем передать нашу строку, содержащую html-теги

и т.д., и проверить ее вывод на та же страница без очистки экрана и ответа сервера.

  $.ajax({
     dataType: 'html',
         success: function(response) {
                   $('#elemnet').html("<p>hello world</p>");
                }
            });

это лично реализовано мной.

Ответ 7

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