if( parent )
{
if( ADAPTER.isString( parent ) ) parent = ADAPTER.get( parent );
if( mode == MODE_REPLACE )
parent.innerHTML = '';
}


And then I could pass the parent as a string and the world was whole again. :)

Unfortunately, I have not yet built that into DOMDom, but will certainly tackle it when I also complete some of the changes Klaus suggested. Look for the next release soon!

Thanks, Zach

@Jack: Yeah, that syntax is less verbose, but I guess the intention of this class was to provide a syntax that minimized the amount of proprietary keywords in it. Less documentation, as Klaus says.

@Klaus: Good suggestions! I will definitely take those to heart. I suppose the attribute list separated by comments is a leftover from my XPath days. I see the W3 spec definitely agrees with you.

The style attribute is supported both ways you have listed there, and you can mix and match if you so choose (but I doubt anyone would)

With the child selectors, how you would you have siblings that would each have children? I don’t see anything in the CSS selector spec on nesting or parenthetical grouping.

div > (span a) + (span a)

<div><span><a/></span><span><a/></span></div>

and not

div > span a + span a

<div><span><a/><span><a/></span></span></div>

As a note to anyone reading, div span div does output as predicted in both DOM and HTML Fragment modes:

<div><span><div></div></span></div>

using selectors for DOM creation is really slick!

We were discussing a port to jQuery and here are some ideas. For attribute creation I’d stick to correct CSS selector syntax:

'input[name="myTextBox"][type="text"][maxlength="5"]'

instead of

'input[name="myTextBox",type="text",maxlength="5"]'

And for inline styles why not using (seems to be more consistent to me):

‘div[style=”height: 80px; color: #f90; border: 1px solid #000;”]’

instead of

‘div{height=80px,color=#f90,border=1px solid #000}’ ?

Pure CSS selectors could also be used for creating child elements:

div > span + span

instead of

{ 'div': [ 'span', 'span' ] }

Just a few ideas… The huge advantage I see with that is that one literally wouldn’t have to remember anything special using the DOM creator if already familiar with CSS selectors. And you would have to write less documentation :-)

By the way, one of your examples is not very well chosen, the one with 'div span div'. A span element may not contain block level elements, thus the resulting DOM would not look like in the given example, but like the following due to browser tag soup parsers closing the span before the div starts:

<div>
<span></span>
<div></div>
</div>

Great work!

As noted on Ajaxian, DomHelper has a less verbose syntax available if you don’t like the default.

Ext.DomHelper.append( myDiv, {
style: ‘width:100%;border:1px solid blue;’,
cls: ‘testClass’,
cn: {tag: ‘a’, href: ‘http://www.google.com/’, cn: {tag: ’span’, html: ‘Google’ }}
});