PDA

View Full Version : What is better? Outputting HTML as a String or Producing it with the DOM



MikoLone
Jun 20th, 2007, 11:12 PM
I need to out put some html with javascript. What is more efficient? (less memory, faster loading etc)

doing something like this


var str = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+w+'" height="'+h+'" id="'+id+'" align="middle">';
str += '<param name="allowScriptAccess" value="sameDomain" />';
str += '<param name="movie" value="'+ swfPath + '" />';
str += '<param name="quality" value="high" />';
str += '<param name="bgcolor" value="#ffffff" />';
str += '<embed src="'+ swfPath + '" quality="high" bgcolor="#ffffff" width="'+w+'" height="'+h+'" name="'+id+'" id="'+id+'" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
str += '</object>';

el.innerHTML = str;


Or something like


var object = document.createElement('object');
object.setAttribute('width', '500');
//etc etc etc....


What do you all think?

_Aerospace_Eng_
Jun 20th, 2007, 11:44 PM
There is already something similar to what you are wanting to do. It uses dom and it can also provide alternate content if there is no flash plugin or javascript is disabled. Its called SWFObject (http://blog.deconcept.com/swfobject/)

MikoLone
Jun 20th, 2007, 11:54 PM
I am actually looking at the site right now. The problem is that I am also outputting other media also such as WMP and QT. Regardless, I would like to know if it is better to create HTML using the DOM or to just concat a string. Is there any advantage using the DOM?

Thanks for responding.

rnd me
Jun 22nd, 2007, 02:07 AM
within a single tag, string printing wil be faster, and i don't know anyone who doesn't user a browser that supports innerHTML.

one word of advise: instead of + + +'ing all those strings, seperate the sections with commas, add [ to the begginging, and ].join('') at the end. when concating more than a dozen or so strings, arrays will be faster, and they let you not be so particular about whitespace.

you can span multiple lines.

when to use DOM methods:
- when creating select/input dropdowns
- live updating partial page sections.
- using seldom-refreshed pages with lots of event binding.

of course, one doc.write at the first load is almost always acceptable, but it is not a dynamic content method.

rnd me
Jun 22nd, 2007, 02:17 AM
oh... i just re-read your post, and thought you might like to at least see this:
it a bit butchered trying to piece together a whole page into a post, but check out the templates.

i spent quite a while finding the most compatible syntax tags for each.

in all browsers from netscape/ie4 - ff2+ie7, khtml, opera, etc, there are only about 5-6 combinations TOTAL of total incompatibility.

they are all considered best-practice.






<form id="form1" name="form1" />
<div id="workspace" ><br>

<big>
What File? <input type="file" onchange="el('hidden2').value=this.value; kill(this)" class="file" id="file1" name="file1" title="click here and browse to the video to embed" size="18" />

<input name="button1" type="submit" value="make it!" >
<br><br><br>

<input type="hidden" id="hidden2" name="hidden2" value="" />

title: <input id="sTitle" onfocus="this.select()" title= " Put a caption for your video here (optional) " name="sTitle" type="text" value="lucas's lost alternate star wars ending" size="50" maxlength="999"/>
<br><br><br><br>




<br><br>
<b style="width:40%; left: 5%; text-align:right; position:relative; display:list-item">
Options: <br>
play automatically when page loads: <input type="checkbox" name="op1" value="op1"><br>

show the user a control bar: <input type="checkbox" name="op2" value="op2"><br>

allow the user to edit/drag the movie container: <input type="checkbox" name="op3" value="op3"><br>



width: <input id="sWidth" onfocus="this.select()" title= " Put a caption for your video here (optional) " name="sWidth" type="text" value="360" size="5" maxlength="9" />&nbsp;&nbsp;&nbsp;

height: <input id="sHeight" onfocus="this.select()" title= " Put a caption for your video here (optional) " name="sHeight" type="text" value="240" size="5" maxlength="9"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


</b><br></big></div>


<div id="donePlain" style="display:none"><br><br>
<a href="vbscript:" id="download" name="download" title="Right-Click , 'Save As'" >download the code to a file...</a><br><br>

<a href="vbscript:" id="download" name="download" title="Right-Click , 'Save As'" >download the code to a file...</a><br>




<textarea onfocus="this.select()" name="text1" cols="80" rows="20" class="form" id="text1" title="paste this into you webpage editor"></textarea><br> <br> </div>



</form>








var Doc=document

function el(tid) //fetches element by id
{return document.getElementById(tid)}

function tags(tid) //fetches a collection of tags of namestr = tid
{ return document.getElementsByTagName(tid)}



/*

User-to-Webpage Attribute-Replacement Map
From: To: */

/*
var rplacments=[ [ "sTitle" , "TITLE" ],
[ "op1" , "AUTO?" ],
[ "sTitle" , "EDIT?" ],
[ "file1" , "FILENAME" ],
[ "sWidth", "WIDTH" ],
[ "sHeight", "HEIGHT" ]]

// end user-to-javascript map.

*/



/* #################################################################################################### #####
#################################################################################################### #####







function doit(){

alert(el("file1").value.toString().split(/^.+\\/)[1])

var mx=rplacments.length
for ( var z=0; z<mx; z++){

var old=rplacments[z][0];
var new=rplacments[z][1];
Doc.title=z;


}//next


}//end function doit

*/


var Formats=[]
var n=function(){return Formats.length;}



//apps:","data/test.pdf","application/vnd.ms-excel",
//:"data/test.html","data/test.pdf","application/vnd.ms-excel", "application/vnd.ms-word"
var apps=" <object data=\"**FILENAME**\" type=\"**TYPE**\" width=\"**WIDTH**\" height=\"**HEIGHT**\"> <a href=\"**FILENAME**\"> **FILENAME** <\/a> <\/object> "

//replace this whole groups 88MPEG88 with "" for the first line and "\n<param name=\"autoplay\" value=\"**AUTOTF?**\">\n"
//"video/x-msvideo" ,"video/x-ms-wmv"
//"video/mpeg" ,"audio/x-midi" ,"audio/mpeg" ,"audio/x-wav"
// this works with all of the above. second row need extra param for true compatibillity
var STD="<object data=\"**FILENAME**\" type=\"**TYPE**\" width=\"**WIDTH**\" height=\"**HEIGHT**\"> <param name=\"src\" value=\"**FILENAME**\"> <param name=\"autoStart\" value=\"**AUTO?**\"> <a href=\"**FILENAME**\">**FILENAME**<\/a> **MPEG** <\/object>"


var oldVids="\n<param name=\"autoplay\" value=\"**AUTOTF?**\">\n"


var qt="<object classid=\"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B\" codebase=\"http:\/\/www.apple.com\/qtactivex\/qtplugin.cab\" width=\"**WIDTH**\" height=\"**HEIGHT**\"> <param name=\"src\" value=\"**FILENAME**\" \/> <param name=\"controller\" value=\"**EDIT?**\" \/><\/object> <!--[if IE]> <textarea id=\'IEblocker\' rows=\'1\' cols=\'1\' style=\'font-size:10%; position:absolute; left:-110px; top: -100px; width:1px; height:1px; visibility:hidden; display:none; z-index:-7; opacity: .0; filter: alpha(opacity=0)\'><![endif]--> <object type=\"video\/quicktime\" data=\"**FILENAME**\" width=\"**WIDTH**\" height=\"**HEIGHT**\" class=\"mov\"> <param name=\"controller\" value=\"**EDIT?**\" \/> You must have a quicktime plugin to view this file <\/object> <!--[if IE]><\/textarea><![endif]-->"


function Ext(x,t,c,m,e){
this.extention=x; this.title; this.codebase=c; this.mimeType=m; this.extra;
return this;};
Formats[n]=Ext ("mov", "Quick Time", qt , "video\/quicktime", "")
Formats[n]=Ext ("avi", "Windows Media (avi) ", STD, "video\/x-msvideo", "")
Formats[n]=Ext ("wma", "Windows Media (wma) ", STD, "video\/x-ms-wmv", "")
Formats[n]=Ext ("mpeg", "MPEG (video)", STD, "video\/mpeg", oldVids)
Formats[n]=Ext ( "mpg", "MPEG (video)", STD, "video\/mpeg", oldVids)
Formats[n]=Ext ("wav", "Wave Audio ", STD, "audio\/x-wav", oldVids)
Formats[n]=Ext ("mid", "Midi track", STD, "audio\/x-midi", oldVids)
Formats[n]=Ext "mpa", "MPEG (audio)", STD, "audio\/mpeg", oldVids)
Formats[n]=Ext ("htm", "Webpage (html)", apps, "text/html", "")
Formats[n]=Ext ("html", "Webpage (html)", apps, "text/html", "")

MikoLone
Jun 22nd, 2007, 05:48 PM
You are right. I don't know what I didn't think of that.

It is better to make an array and than join the strings and I should use the DOM for stuff that is updated more often. I am going to check out your code.

Thanks a ton for the response.

Michael