JavaScriptを使用してページを更新せずにHTML Webページに何かを書き込むにはどうすればよいですか？

Question

私はプログラムを始めています。下のコードでは、実行すると、ページを完全に更新します。どうすればこれを避けることができますか？あなたのお時間をありがとうございました！

<h1>Space Calculator Demo</h1><br> If you were to start a trip at 
 
<script type="text/javascript"> 
 
    function printTime() { 
 
    var d = new Date(); 
 
    var hours = d.getHours(); 
 
    var mins = d.getMinutes(); 
 
    var secs = d.getSeconds(); 
 
    document.body.innerHTML = hours + ":" + mins + ":" + secs; 
 
    } 
 
    setInterval(printTime, 1000); 
 
</script> 
 
<div id="time"></div> , how long would it take you and how much food and water would you need?

Answer 1

ページでは、あなたの時間に等しいページのボディ全体を設定して、爽やかではありません。 bodyの代わりにtimeと設定します。

<h1>Space Calculator Demo</h1><br> If you were to start a trip at 
 
<script type="text/javascript"> 
 
    function printTime() { 
 
    var d = new Date(); 
 
    var hours = d.getHours(); 
 
    var mins = d.getMinutes(); 
 
    var secs = d.getSeconds(); 
 
    document.getElementById('time').innerHTML = hours + ":" + mins + ":" + secs + ","; 
 
    } 
 
    setInterval(printTime, 1000); 
 
</script> 
 
<div id="time"></div>How long would it take you and how much food and water would you need?

Answer 2

代わりのボディを書き換える、のdocument.getElementById（「時間」）を使用してのみ

Answer 3

document.body.innerHTMLに割り当てることによって、その要素のテキストを設定し、あなたはすべてのコンテンツを上書きしますページ上にdocument.bodyはページ全体を指しているので、HTMLに設定すると、以前にあったもの（ヘッダー、div、およびテキスト）がすべて消去されます。

あなたがしたいように見えるのは、<div id="time"></div>の内容を変更するだけです。そのために、あなたはこれにライン

document.body.innerHTML = hours + ":" + mins + ":" + secs; 

を変更する必要があります。

document.getElementById('time').innerHTML = hours + ":" + mins + ":" + secs; 

これは、完全なページの残りの部分を残して、あなたのdivの内容だけを上書きします。