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

On 8/3/2011 8:51 AM, Anne van Kesteren wrote:
> On Wed, 03 Aug 2011 17:46:50 +0200, Glenn Maynard <glenn@zewt.org> wrote:
>> What's the difference?
>
> ele.setAttribute(x, val) works on any element. ele[x] = val does not. 
> They also behave differently for a large number of cases and the 
> latter often takes values of a type other than DOMString.
Seems to me that aria- and data- prefixes are a special case:
data-* and aria-* should always run through the setAttribute code path.

IE9 does have aria attributes on the element as well, in camel case:
element.ariaSelected===element.getAttribute('aria-selected')

It's "always" going to be the case, that setting 'data-*' or 'aria-*' 
will assign a DOM string content attribute.
>> I'd expect this:
>>
>> a = Element.create("a", {href: "http://link", onclick: function(e) { },
>> custom: "value" }, "link");
>>
>> to be essentially equivalent to
>>
>> a = document.createElement("a");
>> a.appendChild(document.createTextNode("link"));
>> attrs = {href: "http://link", onclick: function(e) { }, custom: 
>> "value" };
>> for(key in attrs) a[key] = attrs[key];
>
> Would you expect to write contenteditable as contenteditable or as 
> contentEditable? Also, would you expect custom to end up as a content 
> attribute on that <link> element? Because it will not with this code.
>

contentEditable, tabIndex,  innerHTML seem appropriate.
data-* and aria-* should always run through the setAttribute code path.

The DOM footprint should be light.

Example:
Element.create('a', { webkitShadow: Element.create('p','example shadow 
paragraph') }, 'this is a link & button') .
     attr({role: 'button', onclick: function() { alert('clicked!') }).
    attr({tabIndex: 0, data-status: 'this is an example', 
custom-attribute: 'not serialized'}).
    attr({title: 'title example!', href: 'link.html'});

outerHTML, more or less:
<a title="title example!" role="button" tabindex="0" data-status="this 
is an example" href="link.html">this is a link &amp; button</a>

webkitShadow here:
https://lists.webkit.org/pipermail/webkit-dev/2011-June/017340.html

If an author already has their string sanitized, they would pass through 
the innerHTML attribute anyway.
var x = document.createElement; has not been a reliable shortcut.
var x = Element.create(); could be.

-Charles

Received on Wednesday, 3 August 2011 16:52:18 UTC