How to display source code for a div?

**gwmbox** · 04-30-2010, 03:28 AM

Hi guys

I have a form that is filled in by a user, the form then shows a page with the data they have entered into the form which works fine, however I also want to show that output as html source code, not the entire page, just the section that is the output of the form. How do I do this effectively and if possible with a copy code link/button?

Thanks

**jscheuer1** · 04-30-2010, 04:43 AM

What source code? The source code of anything can be had by using its parent's innerHTML property. If you want only the source of the element, make sure it is an only child.

**gwmbox** · 04-30-2010, 05:43 AM

Ok,

Here is some code I have found and was trying to use, however this will display the code for the entire page, I only want to display the code that is displayed between <code></code> on the page.

Code:

<script type="text/JavaScript">
/* View Source by: robbie lemon
rob.lemon@gmail.com */
window.onload=function(){
var a = document.createElement('a');
a.href="javascript:void(0);";
a.appendChild(document.createTextNode('View Source'));
document.body.appendChild(a);
a.onclick=function(){
var p= document.createElement("p");
var source = "<code>" + document.documentElement.innerHTML + "</code>";
source = source.replace(/</g,"&lt;");
source = source.replace(/>/g,"&gt;");
source = source.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
sourceTemp = source.split("\n");
source = "<table cellpadding=\"0\" cellspacing=\"0\" style=\"border: 1px solid #000000; background-color:#efefef;\"><tr><td nowrap>line #</td><td></td><td></td></tr>";
for(i=0;i<sourceTemp.length;i++){
// remove the nowrap property from the below line if you want word-wrap
source+= "<tr><td align=\"center\">" + Math.round(i+1) + "</td><td>:&nbsp;&nbsp;</td><td>" + sourceTemp[i] + "</td></tr>";
}
source+="</table>";
p.innerHTML = source;
document.body.appendChild(p);
}
}
/* End of View Source script */
</script>

And here is s sample of the output I want to have shown as source code on the page.

Code:

<code><table style="width: 100%;" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td rowspan="4" style="border-top: 1px solid #000000; border-left: 1px solid #000000;" width="34%"><span class="sdcaption">Sire: :</span> firstS</td>
<td rowspan="2" style="border-top: 1px solid #000000; border-left: 1px solid #000000;" width="33%"><span class="sdcaption">Sire: :</span> SecondS</td>
<td style="border-top: 1px solid #000000; border-left: 1px solid #000000;" width="33%"><span class="sdcaption">Sire: :</span> ThirdS..... </code>

**gwmbox** · 04-30-2010, 06:11 AM

Ok I think I worked it out

Code:

<html>
<head>
	<title></title>
<script type="text/javascript">
function viewsource(){
   var oldHTML = document.getElementById('para').innerHTML;
   var newHTML = "" + oldHTML + "";
   var newHTML = newHTML.replace(/</g,"&lt;");
   var newHTML = newHTML.replace(/>/g,"&gt;");
   var newHTML = newHTML.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
	document.getElementById('para').innerHTML = newHTML;
}
</script>

</head>

<body>
<p id='para'><strong>This is my <span style="border: 1px solid #ccc;">test text</span> to check if it works</strong></p> 
<input type='button' onclick='viewsource()' value='View Source'/>
</body>
</html>

However it changes the #ccc to the RGB colour, how do I stop that?

Anything else I missed or did wrong?

No that did not work... I am lost....

**jscheuer1** · 04-30-2010, 06:41 AM

Huh? I mean did it work or not?

Anyways, yes - when you access the innerHTML property of something, it's not what was hard coded. It's what the browser sees it as.

This means that if the browser prefers rgb to hex, colors will be given in rgb. But color should be in your style section anyway, not in the HTML code. If it's that important to you though, the two may be converted.

It also means that if your HTML code is invalid and the browser is able to error correct it, the innerHTML will show the error corrected code.

Additionally, one browser prefers a certain order to attributes of elements and a certain upper/lower case convention when naming tags and attributes/attribute values. Other browsers will have their own ideas.

In like 99% of all cases though, whatever any given browser displays as the innerHTML will work in all browsers to reproduce the element as it was originally seen.

Thread: How to display source code for a div?

Thread Tools

Search Thread

How to display source code for a div?

Bookmarks

Bookmarks

Posting Permissions