True Dynamic Element Object Creation

4 Comments »

1. Matthias Miller says:

   2006/03/22 at 08:57

   I was reading your post and had a few ideas how you might improve the function.

   First of all, you could pass in attribute values as an object, which lets you have natural name/value pairing, such as:

   function crEl(tagName, attributes) {
   tagName = tagName.toLowerCase();
   var element = document.createElement(tagName); //temporary element
   for (var property in attributes) {
   if (tagName == “param”) {
   element.setAttribute(“name”, property);
   element.setAttribute(“value”, attributes[property]);
   }
   else {
   element.setAttribute(property, attributes[property]);
   }
   }
   return element;
   }

   var div = crEl(“div”, { id: “mydiv”, style: “background-color: #ffffff;” });

   If you’re interested in a sophisticated element assembler, you could create an ElementBuilder object. Since I’m on the topic anyway, let me try:

   function ElementBuilder() {
   // maintain a stack of elements to push/pop
   this._elementStack = [document.createDocumentFragment()];
   }

   ElementBuilder.prototype.pushEl = function(tagName, attributes) {
   var element = crEl(tagName, attributes);
   this._elementStack[this._elementStack.length-1].appendChild(element);
   this._elementStack.push(element);
   return element;
   };

   ElementBuilder.prototype.addText = function(text) {
   var textNode = document.createTextNode(text);
   this._elementStack[this._elementStack.length-1].appendChild(textNode);
   };

   ElementBuilder.prototype.pushAndPopEl = function(tagName, attributes) {
   this.pushEl(tagName, attributes);
   this.popEl();
   };

   ElementBuilder.prototype.popEl = function() {
   if (this._elementStack.length > 1) {
   this._elementStack.pop();
   }
   };

   ElementBuilder.attach = function(parent) {
   parent.appendChild(this._elementStack[0]);
   };

   You would use it like this:

   var mp3builder = new ElementBuilder();
   mp3builder.pushEl(“object”, {type:”application/x-shockwave-flash”,data:”http://del.icio.us/static/swf/playtagger.swf”,style:”vertical-align:bottom;”,width:”100″,height:”14″,id:”player”);
   mp3builder.pushAndPopEl(“param”,{allowScriptAccess:”sameDomain”});
   mp3builder.pushAndPopEl(“param”,{flashVars:”theLink=”+url});
   mp3builder.pushAndPopEl(“param”,{movie:”http://del.icio.us/static/swf/playtagger.swf”});
   mp3builder.pushAndPopEl(“param”,{quality:”high”});
   mp3builder.pushAndPopEl(“param”,{bgcolor:”#ffffff”});
   mp3builder.pushAndPopEl(“param”,{wmode:”transparent”});
   mp3builder.popEl();

   Delicious.Mp3.player = crEl(“span”, {id: “delicious”});
   ElementBuilder.attachTo(Delicious.Mp3.player);

   I apologize for any errors. Feel free to edit this comment for formatting and coding errors.
2. rolandog says:

   2006/03/22 at 19:02

   Hello Matthias, and thank you for your insightful comment. Your idea of the assembler sounds really intriguing, I’ll give it a try and see what I can come up with…

   I did spend some time before reading your comment expanding the function, so that it could accept objects and append an onclick event (this last one was unsuccesful).

   Here is the formula I came up with: (dropped some conditions, and a for, and went with a while… but your object oriented arguments seem much better

   function crEl() {
   function cE(el) { //http://simon.incutio.com/archive/2003/06/15/javascriptWithXML
   if (typeof(document.createElementNS) != “undefined”) {
   return document.createElementNS(“http://www.w3.org/1999/xhtml”, el);
   }
   if (typeof(document.createElement) != “undefined”) {
   return document.createElement(el);
   }
   return false;
   }
   var a = arguments; //arguments
   var nN = a[0].toLowerCase(); //nodeName
   if(nN == “tn”) { //creates textNode with first argument after “tn”
   var tN = crTN(a[1]);
   return tN;
   } else if(a.length >= 1 && typeof(a[0]) == “string”) {
   var tE = cE(nN); //temporary Element
   var strs = new Array(); //array to store strings and other stuff
   for(var b = 0; b < a.length; ++b) {
   var tst = a[b]; //temporary storage
   if(typeof(tst) == “object”) {
   tE.appendChild(tst);
   } else {
   strs.push(tst); //these can actually be strings, numbers, functions… anything but objects
   }
   }
   a = strs; //new arguments… (after having appended objects, and removed them from the list)
   } else {
   return a[0]; //in case an object gets passed as the first argument
   }
   var al = a.length; //length of attribute and value pairs
   if(nN == “param”) { //this applies for the param element
   tE.setAttribute(“name”, a[1]);
   tE.setAttribute(“value”, a[2]);
   } else { //if the main element is not a param element…
   var s = 0; //how much to skip after parsing a method
   var l = 1;
   while(l<al) {
   var m = a[l].toLowerCase();
   if(m == “tn”){ //this checks for a delcaration of a textNode
   var txN = crTN(a[l+1]); // creates a textNode
   tE.appendChild(txN); //appends the textNode
   s=2;
   } else if(m == “param” && (a[l+2])) { //if there is a false attribute called ‘param’
   var tpm = cE(m); //creates the param
   tpm.setAttribute(“name”, a[l+1]); //param name and name value
   tpm.setAttribute(“value”,a[l+2]); //param value and value value
   tE.appendChild(tpm);
   s=3;
   } else if(m == “onclick”) {
   tE.onclick = a[l+1];
   s=2;
   } else {
   tE.setAttribute(a[l], a[l+1]);
   s=2;
   }
   l+=s;
   }
   }
   return tE; //returns the element
   }

   function crTN() { //creates a textNode from the first argument.
   var tT = arguments[0]; //temporary text
   var tTN = document.createTextNode(tT); //temporary text node
   return tTN;
   }

   I made some test cases for it (using another modified delicious playtagger)… I’m having trouble with the onclick attribute, I think it might be a mistake of mine… Anyhow, I’m looking for an argument called ‘onclick’, and I’m inferring the next argument to be a function… so that I can then use the onclick method and pass it a function. Here is the content creation function.

   function cc() { //create content
   var id0 = document.getElementById(“image”); //where I’m going to place some of the nodes
   var id1 = document.getElementById(“text”);
   var id2 = document.getElementById(“links”);
   //Here is an image
   var img = crEl(“img”,”src”,”http://rolandog.com/wp-content/r_g.png”,”alt”,”rolandog.com”,”width”,”80″,”height”,”15″);
   //The following test appends through three different methods an image…
   id0.appendChild(img); //works
   document.getElementById(“image”).appendChild(img); //works
   document.getElementById(“image”).appendChild(crEl(“img”,”src”,”http://rolandog.com/wp-content/r_g.png”,”alt”,”rolandog.com”,”width”,”80″,”height”,”15″)); //fails
   //Now we’re gonna try some methods of placing text.
   var bld = crEl(“strong”,”tn”,”I like toast… “); //creating bold text
   var par = crEl(“p”,”tn”,”Mmm, toast.”,bld) //a paragraph that should have a text node… if it was detected and that appends the bold text
   //Now I’ll append it
   id1.appendChild(par);
   //Here is the source of a document and it will be displayed as text/plain
   var src = crEl(“object”,”type”,”text/plain”,”data”,”http://rolandog.com/sounds/playtagger.html”); //source for the playtagger.html
   //now I’ll place it as a child in the id1.
   id1.appendChild(src); //maybe I can create fractal documents??
   //Now for the links…
   var link = crEl(“a”,”href”,”#”,”onclick”,alert(‘Hello dudes’),”tn”,”Hello world.”);
   id2.appendChild(link); //fails in IE… but it does work… the onclick attribute requires its value to be a function
   }

   I did however upload the tests with my latests modifications for object creation in xhtml and html…

   Though I think I’ll head in the direction you’ve pointed. I’m currently in my polymer chemistry lab, but when I get home I’ll give your functions a try… they seem much better. I dunno if I have to leave a statement to declare my code as open source or GPL, but yeah… it is free, and anyone that stops by can pitch in and ‘steal’ it or improve it.
3. Matthias Miller says:

   2006/03/22 at 23:27

   First of all, a correction on my first comment. The last line should be:

   mp3builder.attachTo(Delicious.Mp3.player);

   Just a tip on your onclick handler. Where you have:

   var link = crEl(”a”,”href”,”#”,”onclick”,alert(’Hello dudes’),”tn”,”Hello world.”);

   you are calling the alert function and passing its result into the function. Instead, you should pass in a reference to a function. You might do this:

   var link = crEl(”a”,”href”,”#”,”onclick”,function() { alert(’Hello dudes’) },”tn”,”Hello world.”);

   Or this (note that there are no parentheses after showAlert):

   function showAlert() {
   alert(’Hello dudes’);
   }
   var link = crEl(”a”,”href”,”#”,”onclick”,showAlert,”tn”,”Hello world.”);

   There is yet another approach that I considered presenting this morning. Essentially, instead of setting attributes, it sets properties on the JavaScript object just as you do for the onclick handler. For example:

   function crEl(tagName, properties) {
   function crE(tagName) { /*…*/ }

   function setObjectProperties(object, properties) {
   for (var propertyName in properties) {
   if (typeof properties[propertyName] === “object”) {
   // do a deep copy of objects; recurse here
   setObjectProperties(object[propertyName], properties[object]);
   }
   else if (tagName == “param”) {
   element["name"] = propertyName;
   element["value"] = properties[propertyName];
   }
   else {
   element[propertyName] = properties[propertyName];
   }
   }
   }

   tagName = tagName.toLowerCase();
   var element = crE(tagName); //temporary element
   setObjectProperties(object, properties);
   return element;
   }

   You might call it like this:

   function showAlert() {
   alert(’Hello dudes’);
   }
   var my_div = crElement(“div”, { onclick: showAlert, style: { backgroundColor: “#FF0000″ } });

   Let me know if more explanation would be helpful. I’m interested in seeing what you come up with.
4. Pervasive Smothering » Blog Archive » On Dynamic Elements Creation, Again says:

   2006/07/18 at 18:27

   [...] But, thanks to the great and insightful comments of Matthias Miller, I came up with this interesting piece of code: [...]

• Categories
  • Cyber Frolicking
  • Old Blogspot Posts
  • Podcasts
  • Posts
  • Ramblings
  • Updates
• It’s been a while… Select Month October 2011 August 2011 December 2010 August 2010 June 2010 March 2010 November 2009 October 2009 August 2009 July 2009 June 2009 May 2009 April 2009 March 2009 February 2009 January 2009 December 2008 November 2008 October 2008 August 2008 July 2008 June 2008 May 2008 April 2008 March 2008 February 2008 January 2008 December 2007 October 2007 September 2007 August 2007 July 2007 June 2007 May 2007 April 2007 March 2007 February 2007 January 2007 December 2006 November 2006 October 2006 September 2006 August 2006 July 2006 June 2006 April 2006 March 2006 February 2006 January 2006 December 2005 November 2005 October 2005 July 2005 June 2005 May 2005 April 2005 March 2005 February 2005 January 2005 December 2004 November 2004 October 2004 September 2004 August 2004 July 2004
• Friends and Foes

Copyright © 2012 Rolando Garza is proudly powered by WordPress.org