»
AnglaisFrançaisVietnamien

Imprimer - Modification du contenu des éléments en utilisant innerHTML - JavaScriptBank.com

Version complète: jsB@nk » Snippet » Modification du contenu des éléments en utilisant innerHTML
URL: https://www.javascriptbank.com/changing-the-content-of-elements-using-innerhtml.html

Modification du contenu des éléments en utilisant innerHTML © JavaScriptBank.comSi vous n'avez pas besoin de Netscape 4, du code pour modifier le contenu des éléments est très simple. Ce code peut être utilisé si les éléments sont des éléments en ligne ou positionnés divs. Vous pouvez modifier le contenu onmouseover et onclick.

Version complète: jsB@nk » Snippet » Modification du contenu des éléments en utilisant innerHTML
URL: https://www.javascriptbank.com/changing-the-content-of-elements-using-innerhtml.html



CSS
<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-->


JavaScript
<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-->


HTML
<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-->