W3C home > Mailing lists > Public > public-webapps@w3.org > July to September 2011

Re: Element.create(): a proposal for more convenient element creation

From: Charles Pritchard <chuck@jumis.com>
Date: Sat, 06 Aug 2011 12:11:54 -0700
Message-ID: <4E3D91FA.5070604@jumis.com>
To: Dominic Cooney <dominicc@google.com>
CC: WebApps WG <public-webapps@w3.org>, Jonas Sicking <jonas@sicking.cc>, Maciej Stachowiak <mjs@apple.com>, Garrett Smith <dhtmlkitchen@gmail.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, Anne van Kesteren <annevk@opera.com>, Glenn Maynard <glenn@zewt.org>, Aryeh Gregor <ayg@aryeh.name>
On 8/6/2011 9:05 AM, Dominic Cooney wrote:
> Element.create looks neat. Three thoughts:
...
> Let me briefly reiterate that I think we want *both* Element.create 
> and constructors; they have complementary uses.
I agree.

>
> Second, re: setAttribute vs setting properties, there might be types 
> other than functions we want to not treat as strings; for example if a 
> UA implements CSSOM it might be nice to be able to set a style without 
> having to serialize and reparse the CSSStyleDeclaration.
>
> Can we spec whether something in the attributes hash is set via 
> setAttribute or via setting a property based on the IDL for that element?
How about .attributes as another reserved word:

Element.create('div', { attributes: { 'class': 'foo'} });
Element.create('div', { attributes: [ 'class','foo','class','bar'] } 
).attr({textContent: 'Bar class'});

For reserved words: aria-*, data-* are always a DOMString via 
setAttribute and
.attributes is an object or array used to run additional setAttribute calls.

If attributes were to accept a DOMString:
Element.create('div', { attributes: 'i-replaced="InnerHTML" 
style="font-size: 2em"' });

...

Relevant to the discussion is Doug's createChild proposal:
http://www.w3.org/Graphics/SVG/WG/wiki/Simple_SVG_API#createChild

Doug adds an index integer as the third argument, something to consider.
Passing "0" as an argument is easier than firstChild().insertBefore() 
semantics.

Example:
parentElement.createChildNS( htmlns, 'div', { data-test: 'test' }, 0); 
// add to parent at position: 0.


Position could be a helpful abstraction:

Element.create('div').create(span,{textContent: 'second node'}).
     position(0).create('span', {textContent: 'first node'});
<div><span>first node</span><span>second node</span>

Element.create('div').create('div').create('span', {textContent: 'span 
node in two divs'}).
     position(-1,0).create('span', {textContent: 'span node in first 
div, first child.'});
<div><span>span node in first div, first child</span>
<div><span>span node in two divs</span></div></div>

Could be handy to use with querySelector.

-Charles
Received on Saturday, 6 August 2011 19:12:33 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 18:49:47 GMT