JavaScript DHTML/Node Operation/innerHTML
Содержание
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>