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.

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.

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.