JavaScript DHTML/Node Operation/innerHTML

Материал из Web эксперт
Перейти к: навигация, поиск

Get the paragraph tag and set its innerHTML value

   <source lang="html4strict">
 

<html> <head>

   <title>the date</title>

</head> <body>

   <script type = "text/javascript">
   var today = new Date();
   var then = new Date();
   then.setFullYear(3000,1,1);
   
   var diff = then.getTime() - today.getTime();
   
   diff = Math.floor(diff / (1000 * 60 * 60 * 24));
   
   var dateLoc = document.getElementById("dateField");
   
   dateLoc.innerHTML = diff + " days";
   </script>

</body> </html>


 </source>
   
  


"innerHTML" Example

   <source lang="html4strict">
 
   

<html> <body>

Sample Text inside a p element

<button onclick="alert(myP.innerHTML);">InnerHTML</button> <button onclick="alert(myP.innerText);">InnerText</button> </body> </html>



 </source>
   
  


Modifying Elements after Page loads

   <source lang="html4strict">
  

<html> <head> <title>Modifying Elements after Page loads</title> <script type="text/javascript"> function changeDiv() {

  var elem1 = document.getElementById("elem1");
elem1.innerHTML = "

Hello World

";

} </script> <body onload="changeDiv();">

Paragraph text.

</body> </html>


 </source>
   
  


Switch html with assigning the innerHTML

   <source lang="html4strict">
  

<html> <head> <title>Overflow</title> <style type="text/css">

  1. div1 { width: 700px; height: 150px }
  2. div2 { width: 600px; height: 100px; overflow: auto }

</style> <script type="text/javascript"> function switchContent() {

   var div1 = document.getElementById("div1").innerHTML;
   var div2 = document.getElementById("div2").innerHTML;
   document.getElementById("div1").innerHTML = div2;
   document.getElementById("div2").innerHTML = div1;
   

} </script> </head> <body>

<a href="javascript:switchContent();">Switch</a>

p1

Smaller item.

</body> </html>


 </source>