Rolando Garza

4 Comments

• Matthias Miller wrote:

  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.
• rolandog wrote:

  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.
• Matthias Miller wrote:

  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.
• Pervasive Smothering » Blog Archive » On Dynamic Elements Creation, Again wrote:

  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: [...]