Using JS to change an HTML code

@KramyMar 31.2006 — #Oh sorry, misread you. You can't affect the source of a page, but a page can be built to adjust based on variables. PHP, for example, can have things put into the address, which affect the page. This edit page has:
[CODE]http://www.webdeveloper.com/forum/editpost.php?do=editpost&p=542802[/CODE]
That tells it to change the layout to include an advanced edit box, and also the post number I'm replying to or editting.

[b]--------Original Message--------[/b]

You can assign an ID to certain elements in the body.

[CODE]<table><tr><td id="changeme">hi<td></tr></table>
 <div id="changeme2">bOO</div>[/CODE]

then use javascript:

[CODE]<script type="text/javascript">
 <!--
 var NewHTML = '<img src="blank.gif">';
 document.getElementById('changeme').innerHTML = NewHTML
 //-->
 </script>[/CODE]

You can combine this with onClick and other functions to get effects like those orange/blue arrows on the right side of this page.

The below code will work if pasted into a .html file:

[CODE]<html>
 <head>
 
 <script type="text/javascript">
 <!--
 var SomethingIsTrue = true;
 
  function ChangeContent()
   {
   if(SomethingIsTrue)
   {
   var NewHTML = '<img src="http://www.webdeveloper.com/forum/images/buttons/collapse_tcat_collapsed.gif" onClick="ChangeContent();"> <--- w00t, now it is blue!';
   SomethingIsTrue = false;
   }
   else
   {
   var NewHTML = '<img src="http://www.webdeveloper.com/forum/images/buttons/collapse_tcat.gif" onClick="ChangeContent();"> <--- w00t, now it is orange!';
   SomethingIsTrue = true;
   }
 
   document.getElementById('ReplaceMe').innerHTML = NewHTML
   }
   //-->
  </script>
 
 </head>
 <body>
 
 <table border="0" width="100%"><tr><td id="ReplaceMe">
 
 
 <img src="http://www.webdeveloper.com/forum/images/buttons/collapse_tcat.gif" onClick="ChangeContent();"> <--- Click That!
 
 
 </td></tr></table>
 
 </body>
 </html>[/CODE]

Google [URL=http://www.google.ca/search?hl=en&q=innerHTML+tutorial&btnG=Google+Search&meta=]innerHTML tutorial[/URL].

Using JS to change an HTML code

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Using JS to change an HTML code

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴