« »

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.

Label: Changing the Content of Elements Using innerHTML

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
CSS
JavaScript
HTML
Print

Copy All x2

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

Copy All x2

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

Copy All x2

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

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Unknown [more]
5,486
0
9
0
3.78 KBytes

JavaScript Changing the Content of Elements Using innerHTML

3.3/5 9 votes / 5,486 previews / 0 comment 30/01/2007 If you don't need to support Netscape 4, code for changing the content of elements is very simple. This code can be used...JavaScript Changing the Content of Elements Using innerHTML - Changing the Content of Elements Using innerHTML

Let's be first member to do this

jerry_200401 tomyanh haininhat3a hai1061984 perhacker

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Changing the Content of Elements Using innerHTML

Label: Changing the Content of Elements Using innerHTML (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: Changing the Content of Elements Using innerHTML