Full version: jsB@nk » Snippet » Changing the Content of Elements Using innerHTML
URL: https://www.javascriptbank.com/changing-the-content-of-elements-using-innerhtml.html
If you don't need to support Netscape 4, code for changing the content of elements is very simple. This code can be used whether the elements are regular inline elements or positioned divs. You can change the content onmouseover and onclick.
Full version: jsB@nk » Snippet » Changing the Content of Elements Using innerHTML
URL: https://www.javascriptbank.com/changing-the-content-of-elements-using-innerhtml.html
<style type="text/css">body { font: 12px/1.3 verdana, arial, helvetica, sans-serif; }h1 { font-size:16px }a:link { color:#33c }a:visited { color:#339 }div#main { position:absolute; top:110px; left:10px }div#lyr1 { position:relative; left:0px; top:0px; width:250px; height:70px; background-color:#eee; border:1px solid black; padding:6px; font-size:11px; line-height:1.4 }span.hot { color:#c00; font-style:italic; } </style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">function changeContent(id,shtml) { if (document.getElementById || document.all) { var el = document.getElementById? document.getElementById(id): document.all[id]; if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml; }}var msg1 = 'New content for the layer. Content written to the element can be plain text or <span class="hot">rich html,</span> including images.';var msg2 = "You can enclose your message string in single quotes so html tags in the string can use double quotes for attributes.";var msg3 = 'There are lots of writing to layers examples at <a href="http://jsbank.beplaced.com">JSBank</a>.';</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="lyr1">A layer you can write to.</div><p><a href="javascript:;" onmouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1','A layer you can write to.')">Hover here</a> to change the content of the layer above. <a href="javascript:;" onclick="changeContent('lyr1',msg2)">Click here</a>.</p><p><a href="javascript:;" onmouseover="changeContent('td1','new content for the table cell')" onmouseout="changeContent('td1','table cell')">Hover here</a> to change the content of the table below.</p><table border="1" cellpadding="4" cellspacing="0"> <tbody><tr> <td id="td1">table cell</td> </tr></tbody></table></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->