Switch html with assigning the innerHTML : innerHTML « Node Operation « JavaScript DHTML






  1. JavaScript DHTML
  2. Node Operation
  3. innerHTML

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>








Related examples in the same category

1.'innerHTML' Example
2.Get the paragraph tag and set its innerHTML value
3.Modifying Elements after Page loads