Why does javascript overwrite Html codes

I have just started learning javascript and my question is very basic question about javascript but i had to learn the logic behind it.

   <p id="demo">This is a paragraph.</p>

  <script type="text/javascript">
   document.getElementById("demo").innerHTML=Date();
  </script>

With these codes, only date appears on the browser and browser ignores "This is a paragraph".Should not browser write first "This is a paragraph" and below that display date?Being in the same class means, javacript overwrites every tags of the same cla开发者_开发知识库ss? Thanks

---

innerHTML replaces whatever HTML is there with whatever you specificy. If you want to append, you'd need to grab what is there first. Something like this:

var myTag = document.getElementById("demo");
myTag.innerHTML = myTag.innerHTML + Date();

---

An element's innerHTML property represents its entire contents. When you assign a new value to it, you replace the entire contents. It sounds like you want to use += instead of = so that you append to the existing string rather than replacing it.

---

innerHTML replaces the text inside the element that it is invoked on with what you pass to it, hence "This a paragraph" will be replaced by the value of date.

Try this instead:

document.getElementById("demo").innerHTML = 
  document.getElementById("demo").innerHTML + Date();

---

Should not browser write first "This is a paragraph" and below that display date?

Seems that you want a line break and then the date.

Do this to accomplish that without destroying the existing content:

var demo = document.getElementById("demo");

demo.appendChild( document.createElement( 'br' ) );
demo.appendChild( document.createTextNode( Date() ) );