Какова реальная цель document.write?

Я пытаюсь сделать некоторые доказательства с JavaScript, но я вижу поведение, которое, как я считаю, не обязательно должно быть таким. Вот мой код:Какова реальная цель document.write?

Код:

<!DOCTYPE html> 
    <head> 
     <meta charset = "utf-8"/> 
     <title> Exercise prompt </title> 
     <script type = "text/javascript"> 
      function disp_prompt() 
      { 
      var name = prompt("Please enter your name", ""); 

      if(name != null && name != "") 
      { 
       document.write("Hi " + name + " How are you?"); 
      }  
      } 
     </script> 
    </head> 
    <body> 
     <input type = "button" onclick = "disp_prompt()" value = "Show a prompt box." /> 
    </body> 
</html>

Ожидаемый результат:

При нажатии на кнопку, появится приглашение, и когда я нажимаю кнопку «Принять ", предложение по функции document.write должно быть под кнопкой.

Результат:

Когда prompt box он отображается и жму на кнопку «Принять», кнопка и исчезнут только показано предложение на функцию document.write.

Я могу видеть на w3schools следующее предложение:

Написать текст непосредственно в HTML-документ

, но я также мог видеть еще одно заявление:

Используя document.write() после полной загрузки HTML-документа, удаляется весь существующий HTML-код.

Поэтому я не могу понять настоящую цель document.write. Если вы хотите написать текст на своем HTML ... Почему он должен удалить остальные элементы?

Есть ли способ избежать этого и сохранить остальные элементы на HTML?

Заранее благодарен!

источник

2015-09-28 Francisco Romero

Второй ответ в несколько аналогичном вопросе, который я опубликовал некоторое время назад, может иметь хорошие ответы на него: http://stackoverflow.com/questions/12574098/is-document-write-actually-deprecated – Stephen

использовать методы DOM/_innerHTML_ для обновления вашего контента. _document.write() _, за пределами нескольких краевых случаев, следует избегать. его можно использовать для синхронизации сценариев загрузки, вставлять объявления или влиять на способ отображения страницы, вставляя динамический контент. – dandavis

Как браузер должен знать, что содержание должно появиться под кнопкой? –

Цель document.write() это вставить некоторые динамические/вычисленное содержание на страницу где именно скрипт помещается. Например (хотя надуманный один ...):

<html> 
<body> 
    hello, the date is <script>document.write(new Date())</script> 
</body> 
</html>

Более гибкий подход, который позволяет изменять содержимое страницы после того, как он полностью загружен, чтобы использовать специальный элемент для размещения вы контент, и изменить его innerHTML

function clicked() { 
 
    document.getElementById('dynamic').innerHTML = 'It was clicked!'; 
 
}

<span onclick="clicked()">Click Me</span><br> 
 
<span id="dynamic"></span>

Другое то, что существует множество библиотек, которые помогают сделать это проще, прежде всего, jQuery.

источник

2015-09-28 23:46:42 Amit

Да, но в вашем коде первый элемент не перезаписан 'document.write'. В моем случае кнопка исчезает, потому что она перезаписывается предложением, которое я положил на 'document.write'. –

, потому что, как я объяснил, 'document.write()' вставляет содержимое точно там, где оно размещено. вы можете думать об этом, как будто вы вынимаете весь блок сценария и заменяете его тем, что вы передаете функции. в вашем случае весь документ заменяется, поскольку после его закрытия (полностью загруженного) вызов 'document.write()' полностью перезапишет его, как вы сами видели. – Amit

Затем кнопка заменяется, потому что функция, в которой я ее использую, вызывается, когда я использую кнопку, не так ли? –

Какова реальная цель document.write?

ответ

Смежные вопросы