The problem is that the code becomes very verbose (and not elegant) when I want to create a part of a web page in code.
When I want to create a table in code, I create a documentFragment and call a MakeTable function:
DOM is not object oriented so for just one row and two cells:
function MakeTable(sDivId) {
var oFra = document.createDocumentFragment();
var oTable = document.createElement("table");
oFra.appendChild(oTable);
var oTbody = document.createElement("tbody");
oTable.appendChild(oTbody);
var oTr = document.createElement("tr");
oTbody.appendChild(oTr);
var oTd = document.createElement("td");
oTr.appendChild(oTd);
var oText = document.createTextNode("one");
oTd.appendChild(oText);
oTd = document.createElement("td");
oTr.appendChild(oTd);
oText = document.createTextNode("two");
oTd.appendChild(oText);
document.getElementById(sDivId).appendChild(oFra);
}
This is how I like it, in almost one statement (and with style):If attributes containt the characters ":" or ";" as in the example, use encodeURIComponent to hide them.
function MakeTable(sDivId) {
var oFra = document.createDocumentFragment();
oFra.a$("table", {border:"1", width:"50%", className:"dataForm", style:"backgroundColor:#eef"}).
a$("tbody").a$("tr").
a$("td", { t: "one" }).parentNode.
a$("td", { t: "one",
style:"backgroundImage:"+encodeURIComponent("url(data:image/jpeg;base64,....)") });
document.getElementById(sDivId).appendChild(oFra);
}
What I do is include a method (a$) in the documentFragment (first statement). This method lets me: - pass both parameters (sTag, oAtr)
- Adds child (sTag) with attributes (oAtr)
- do not pass any parameters
- removes all children
- pass only sTag parameter
- Adds child (sTag) without any attributes
- pass only oAtr parameter
- Defines attributes, styles, text. They must be written in javascript style (className, htmlFor for attributes and backgroundColor etc for style).
For text content use "t":"one"
ins.js
/* 20111020 ****************************************************/
if (typeof ins !== "object") { var ins = {}; }
var $ = function (sId) { return document.getElementById(sId); }
//========================================================================
ins.oNS = {
"mathml": "http://www.w3.org/1998/Math/MathML"
, "svg": "http://www.w3.org/2000/svg"
, "xlink": "http://www.w3.org/1999/xlink"
, "xsi": "http://www.w3.org/2001/XMLSchema-instance"
};
ins.a$ = function (sTag, oAtrs) {
var oChild = this, aTag, sNS;
if (typeof sTag === "undefined" && typeof oAtrs === "undefined") {
while (this.hasChildNodes()) this.removeChild(this.lastChild);
return this;
}
if (typeof sTag === "object" && typeof oAtrs === "undefined") {
return ins.s$.call(this, sTag);
}
if (typeof sTag === "string" && sTag !== "") {
if (sTag.indexOf(":") === -1) {
oChild = document.createElement(sTag);
} else {
aTag = sTag.split(":");
sNS = aTag[0];
if (ins.oNS.hasOwnProperty(aTag[0])) {
oChild = document.createElementNS(ins.oNS[aTag[0]], aTag[1]);
} else {
throw "namespace:" + aTag[0];
}
}
if (typeof oAtrs === "object") {
var oInsertBefore = oAtrs.insertBefore;
if (typeof oInsertBefore === "object") {
oChild.removeAttribute("insertBefore");
}
ins.s$.call(oChild, oAtrs);
if (typeof oInsertBefore === "object") {
this.insertBefore(oChild, oAtrs.insertBefore);
} else {
this.appendChild(oChild);
}
} else {
this.appendChild(oChild);
}
}
return oChild;
};
ins.s$ = function (oAtrs) {
if (typeof oAtrs !== "object") { throw oAtrs; }
var sAtr, sStyle;
for (sAtr in oAtrs) {
if (!oAtrs.hasOwnProperty(sAtr)) { continue; }
if (typeof oAtrs[sAtr] === "function") {
this[sAtr] = oAtrs[sAtr];
} else {
switch (sAtr) {
case "style":
var aStyle, aStyles = oAtrs[sAtr].split(";");
for (sStyle in aStyles) {
if (aStyles.hasOwnProperty(sStyle)) {
aStyle = aStyles[sStyle].split(":");
if (aStyle.length >= 2 && aStyle[0].length > 0) {
this.style[aStyle[0]] = decodeURIComponent(aStyle[1]);
}
}
}
break;
case "t":
this.appendChild(document.createTextNode(oAtrs[sAtr]));
break;
default:
if (typeof oAtrs[sAtr] === "string") {
this.setAttribute(sAtr, oAtrs[sAtr]);
} else {
this[sAtr] = oAtrs[sAtr];
}
break;
}
}
}
return this;
};
Element.prototype.a$ = function (sTag, oAtrs) { return ins.a$.call(this, sTag, oAtrs); };
var bFragment = true;
try {
DocumentFragment.prototype.a$ = function (sTag, oAtrs) { return ins.a$.call(this, sTag, oAtrs); };
} catch (e) { bFragment = false; }
Tested in IE8,IE9,FF4,O10,C6 (@2010.12.14)
No comments:
Post a Comment