place HTML code with inline javascript into a div

[drchaos]

Placing HTML code with inline javascript into a div both as rendered HTML(the intended final purpose) and shown as RAW text HTML (for the user to copy and paste into their own webpage.)

Here is the setup. Yes, this is a heavily dynamic and AJAX driven page.
one section shows both a display of raw HTML code for the purpose of a user being able to copy paste this code (which contains inline javascript) into their own webpage.

a sample being here:

<table width="150" border="0" bordercolor="#000000" ><tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="8" bgcolor="#808080"> </td> <td width="*" bgcolor="#808080"> <font face=Helvetica color=#000000 size=2 > honda is a long name</font> </td> <td width="90" bgcolor="#808080" align="right"><font face=Helvetica color=#000000 size=2 ><script language="JavaScript" type="text/javascript" > var m = new Array( "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ); var d = new Date(); document.writeln( m[d.getMonth()] + ". " + d.getUTCDate() + ", " + d.getFullYear() ) </script></font> </td> </tr> <tr> <td width="8" bgcolor="#696969"> </td> <td bgcolor="#696969" colspan="2"> data </td> </tr> </table></table>
 

Note the inline Javascript to generate the date.
this is generated on the fly by a user of the site as they select desired colors and fonts etc... for the output code.


THE ISSUE:
when the user wants to see not the raw code but the sample output, they select so on a dropdown and the target div is replaced with the above code BUT the "<" are not converted to "&lt;" as they where for the RAW display.
OK, i noticed i had issues when the filler text had "<script" or "</script" so in the (to-be-placed) text i had "<script" as "Lscript" and "L/script" which are converted back in the "fillsection()" code.

================================================
target code section:
-------------------------------

<div name="codesection">
<div>
 
replace code
-------------------------------
function fillsection(sectionid, secdata){
    while (secdata.indexOf( "^" ) > -1 )
        secdata = secdata.replace( "^", "\"" );
    while (secdata.indexOf( "Lscript" ) > -1 )
                secdata = replaceAll(secdata, "Lscript","<script");
    while (secdata.indexOf( "L/script" ) > -1 )
                secdata = replaceAll(secdata, "L/script","</script");
 
    var replace = document.getElementById(sectionid);
    var wrappingDiv = document.createElement('div');
    wrappingDiv.className="text/html";
    var divdata = ""+ secdata;
    wrappingDiv.innerHTML = ""+divdata;
    replace.innerHTML= '';
    replace.appendChild(wrappingDiv);
}
 
 
 

the doctor:
EMAIL REMOVED

[acoder]

For the raw html, use <pre> tags or put the code into a textarea, and for the sample output, just set the innerHTML. That way, you don't need to replace anything.