innerHTML - JavaScriptBank.comPhiên bản đầy đủ: jsB@nk » Thủ thuật » Thay đổi nội dung bằng thuộc tính innerHTML
URL: https://www.javascriptbank.com/changing-the-content-of-elements-using-innerhtml.html
Đoạn mã cho phép bạn thay đổi nội dung(mã HTML) của một đối tượng nào đó như: div, table, span... bằng cách sử dụng thuộc tính innerHTML. Trong ví dụ này là các đối tượng div và cell với sự kiện onMouseover và onClick. Tuy nhiên, hiệu ứng nàu chỉ được chỉ dụng với trình duyệt IE.
Phiên bản đầy đủ: jsB@nk » Thủ thuật » Thay đổi nội dung bằng thuộc tính 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-->