DOM & Prototype: now even faster
September 25, 2007While playing around with the prototype framework, I wrote 2 code snipplets I want to share with you:
var _ = function(sEName, id, classname, attributes) { var e = document.createElement(sEName); if(id) { e.id = id; } if(classname) { e.className = classname; } if(attributes) { for(var p in attributes) { e.setAttribute(p, attributes[p]); } } return $(e); } Element.addMethods({ _a: function(element, e) { element.appendChild(e); return $(e); }, _r: function(element, e) { element.removeChild(e); return$(e); } });
Using the functions above, you will be able to create HTML structures on the fast DOM-lane:
var oHTML = _('div', 'head', 'headClass'); oHTML._a(_('div', 'second', 'secondClass'))._a(_('img', 'myimage', 'images', {src:'pica.jpg'})); document.body.appendChild(oHTML);
Which results in:
<div id="head" class="headClass"> <div id="second" class="secondClass"> <img src="pica.jpg" id="myimage" class="images" /> </div> </div>
Enjoy.
I couldn’t understand some parts of this article o.us poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.
Comment by Daniel — September 25, 2007 @ 10:50 am
Hi Daniel,
The functions above are based on the javascript prototype framework, maybe you should take a look at this at prototypejs.org .
Cheers
Comment by admin — September 25, 2007 @ 10:59 am
that’s nice, but aren’t you duplicating the functionality of Builder?
Comment by zack — September 25, 2007 @ 10:55 pm
[…] DOM and Prototype: now even faster Using these functionse, you will be able to create HTML structures on the fast DOM-lane. […]
Pingback by All in a days work… — September 26, 2007 @ 3:29 am
Builder is from scriptaculous, so that’s a different framework
Comment by Martijn de Kuijper — September 30, 2007 @ 9:37 pm
it is definately quick, but users should keep in mind some of the gotcha’s that will bite them if they aren’t careful!
Microsoft Internet Explorer has a LOT of DOM bugs that will cause failure in you functions (if no precautions are taken).
1.) Adding any inline events (e.g. onclick) will work in all browsers *EXCEPT* IE
Bug Link:
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html
2.) Setting attributes in IE requires sending in the CaMeLcAsE version of the property name. e.g. ‘cellPadding’, ‘frameBorder’, ‘colSpan’
Bug Link:
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html
3.) Setting attributes in IE like ‘for’ or ’style’ won’t work either.
Bug Links:
http://webbugtrack.blogspot.com/2007/09/bug-116-for-attribute-woes-in-ie6.html
http://webbugtrack.blogspot.com/2007/10/bug-245-setattribute-style-does-not.html
4.) Setting the ‘type’ or ‘name’ attributes in IE will also fail.
Bug Links:
http://webbugtrack.blogspot.com/2007/09/bug-237-type-is-readonly-attribute-in.html
http://webbugtrack.blogspot.com/2007/10/bug-235-createelement-is-broken-in-ie.html
Just an FYI!
Comment by Marshal — November 6, 2007 @ 4:56 pm