matthieu.guillaumin-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Aug-20 15:51 UTC
Contribution on extending createElement
Hi all,
I work a lot with scripts that modify the DOM, and I have always found
quite annoying that the code would always get very verbose as soon as
I wanted to create even simple structures :
var my_div = document.createElement(''div'');
var my_anchor = document.createElement(''a'');
my_anchor.setAttribute(''href'',my_link);
var my_text = document.createTextNode(''here is my link'');
my_anchor.appendChild(my_text);
my_div.appendChild(my_anchor);
$(document_element).appendChild(my_div);
... I guess you see what I''m talking about !
Back a few months, I wrote a function that would do all that in a one-
liner. Since then, I''ve discovered Prototype so I rewrote my function
in a more prototype-ish fashion :
function _(element) {
var args = $A(arguments).slice(1);
if ( element == ''#text'' )
return document.createTextNode(args.join(''''));
if ( typeof element == ''string'' )
element = document.createElement(element);
args.each( function(v,i) { (v.nodeType > 0)?element.appendChild(v):
$H(v).each( function(pair) { element[pair.key]=pair.value } ) } );
return element;
}
Using this function, the initial code rewrites the following way:
_($(document_element),_(''div'',_(''a'',
{''href'':
my_link },_("#text",''here is my link'')));
Comments are welcome !
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Hi! I believe you missed out on: http://prototypejs.org/2007/5/12/dom-builder Regards, Tobie On Aug 20, 11:51 am, "matthieu.guillau...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org" <matthieu.guillau...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi all, > > I work a lot with scripts that modify the DOM, and I have always found > quite annoying that the code would always get very verbose as soon as > I wanted to create even simple structures : > > var my_div = document.createElement(''div''); > var my_anchor = document.createElement(''a''); > my_anchor.setAttribute(''href'',my_link); > var my_text = document.createTextNode(''here is my link''); > my_anchor.appendChild(my_text); > my_div.appendChild(my_anchor); > $(document_element).appendChild(my_div); > > ... I guess you see what I''m talking about ! > > Back a few months, I wrote a function that would do all that in a one- > liner. Since then, I''ve discovered Prototype so I rewrote my function > in a more prototype-ish fashion : > > function _(element) { > var args = $A(arguments).slice(1); > if ( element == ''#text'' ) > return document.createTextNode(args.join('''')); > if ( typeof element == ''string'' ) > element = document.createElement(element); > args.each( function(v,i) { (v.nodeType > 0)?element.appendChild(v): > $H(v).each( function(pair) { element[pair.key]=pair.value } ) } ); > return element; > > } > > Using this function, the initial code rewrites the following way: > _($(document_element),_(''div'',_(''a'', {''href'': > my_link },_("#text",''here is my link''))); > > Comments are welcome !--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hey There,
Yeah the redundancy in document.createElement is the pits.
Although im sure you''re function works, you could streamline the
syntax.
function _element(tagName, options){
return
Element.extend(Object.extend(document.createElement(tagName), options
|| {}));
}
I have done something similar in my own library, but I look
forward to having support for this in the "native" prototype library.
Cheers,
Matt
On Aug 20, 1:13 pm, Tobie Langel
<tobie.lan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hi!
>
> I believe you missed out on:http://prototypejs.org/2007/5/12/dom-builder
>
> Regards,
>
> Tobie
>
> On Aug 20, 11:51 am,
"matthieu.guillau...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
>
> <matthieu.guillau...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > Hi all,
>
> > I work a lot with scripts that modify the DOM, and I have always found
> > quite annoying that the code would always get very verbose as soon as
> > I wanted to create even simple structures :
>
> > var my_div = document.createElement(''div'');
> > var my_anchor = document.createElement(''a'');
> > my_anchor.setAttribute(''href'',my_link);
> > var my_text = document.createTextNode(''here is my
link'');
> > my_anchor.appendChild(my_text);
> > my_div.appendChild(my_anchor);
> > $(document_element).appendChild(my_div);
>
> > ... I guess you see what I''m talking about !
>
> > Back a few months, I wrote a function that would do all that in a one-
> > liner. Since then, I''ve discovered Prototype so I rewrote my
function
> > in a more prototype-ish fashion :
>
> > function _(element) {
> > var args = $A(arguments).slice(1);
> > if ( element == ''#text'' )
> > return document.createTextNode(args.join(''''));
> > if ( typeof element == ''string'' )
> > element = document.createElement(element);
> > args.each( function(v,i) { (v.nodeType >
0)?element.appendChild(v):
> > $H(v).each( function(pair) { element[pair.key]=pair.value } ) } );
> > return element;
>
> > }
>
> > Using this function, the initial code rewrites the following way:
> >
_($(document_element),_(''div'',_(''a'',
{''href'':
> > my_link },_("#text",''here is my link'')));
>
> > Comments are welcome !
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
I usually use lowpro (by Dan Webb) for these kind of things... the
syntax is really simple and it also add some great other features.
To take matthieu''s example:
var my_div = $div(
$a({href: my_link}, my_text)
);
$(document_element).appendChild(my_div);
you can take look at lowpro over here:
http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype
On Aug 20, 8:43 pm, Matt Foster
<mattfoste...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hey There,
>
> Yeah the redundancy in document.createElement is the pits.
> Although im sure you''re function works, you could streamline the
> syntax.
>
> function _element(tagName, options){
>
> return
> Element.extend(Object.extend(document.createElement(tagName), options
> || {}));
>
> }
>
> I have done something similar in my own library, but I look
> forward to having support for this in the "native" prototype
library.
>
> Cheers,
> Matt
>
> On Aug 20, 1:13 pm, Tobie Langel
<tobie.lan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Hi!
>
> > I believe you missed out
on:http://prototypejs.org/2007/5/12/dom-builder
>
> > Regards,
>
> > Tobie
>
> > On Aug 20, 11:51 am,
"matthieu.guillau...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
>
> > <matthieu.guillau...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> > > Hi all,
>
> > > I work a lot with scripts that modify the DOM, and I have always
found
> > > quite annoying that the code would always get very verbose as
soon as
> > > I wanted to create even simple structures :
>
> > > var my_div = document.createElement(''div'');
> > > var my_anchor = document.createElement(''a'');
> > > my_anchor.setAttribute(''href'',my_link);
> > > var my_text = document.createTextNode(''here is my
link'');
> > > my_anchor.appendChild(my_text);
> > > my_div.appendChild(my_anchor);
> > > $(document_element).appendChild(my_div);
>
> > > ... I guess you see what I''m talking about !
>
> > > Back a few months, I wrote a function that would do all that in a
one-
> > > liner. Since then, I''ve discovered Prototype so I
rewrote my function
> > > in a more prototype-ish fashion :
>
> > > function _(element) {
> > > var args = $A(arguments).slice(1);
> > > if ( element == ''#text'' )
> > > return
document.createTextNode(args.join(''''));
> > > if ( typeof element == ''string'' )
> > > element = document.createElement(element);
> > > args.each( function(v,i) { (v.nodeType >
0)?element.appendChild(v):
> > > $H(v).each( function(pair) { element[pair.key]=pair.value } ) }
);
> > > return element;
>
> > > }
>
> > > Using this function, the initial code rewrites the following way:
> > >
_($(document_element),_(''div'',_(''a'',
{''href'':
> > > my_link },_("#text",''here is my
link'')));
>
> > > Comments are welcome !
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---