JavaScript DHTML/Node Operation/innerHTML — различия между версиями

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

Текущая версия на 07:25, 26 мая 2010

Get the paragraph tag and set its innerHTML value

  
<html>
<head>
    <title>the date</title>
</head>
<body>
    <p id="dateField"></p>
    
    <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>



"innerHTML" Example

  
    
<html>
<body>
<p id="myP">Sample Text inside a <b>p</b> element</p>
<button onclick="alert(myP.innerHTML);">InnerHTML</button>
<button onclick="alert(myP.innerText);">InnerText</button>
</body>
</html>



Modifying Elements after Page loads

   
<html>
<head>
<title>Modifying Elements after Page loads</title>
<script type="text/javascript">
function changeDiv() {
   var elem1 = document.getElementById("elem1");
   elem1.innerHTML = "<h1>Hello World</h1>";
}
</script>
<body onload="changeDiv();">
<div id="elem1">
    <p>Paragraph text.</p>
</div>
</body>
</html>



Switch html with assigning the innerHTML

   
<html>
<head>
<title>Overflow</title>
<style type="text/css">
#div1 { width: 700px; height: 150px }
#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>
<p>
<a href="javascript:switchContent();">Switch</a> 
</p>
<div id="div1">
    <p>p1</p>
</div>
<div id="div2">
    <p>Smaller item.</p>
</div>
</body>
</html>