Tip of the day

The attachChild method of the node object returns the added node. This allows to add a number of nested nodes with one line of javascript code without the need of extra variables to store nodes.
For example adding a paragraph with a text to the document body:

document.body.appendChild(document.createElement('p')).appendChild(document.createTextNode('paragrap h text'));

Adding the power of with operator you can construct a complete node tree without a single variable declaration:

with(document.body.appendChild(document.createElement('div')))
{ appendChild(document.createElement('p')).appendChild(document.createTextNode('first paragraph'));
appendChild(document.createElement('p')).appendChild(document.createTextNode('second paragraph'));
with(style)
{ background="#00ee00";
padding="20px";
}
with(appendChild(document.createElement('div')))
{ appendChild(document.createElement('p')).appendChild(document.createTextNode('third paragraph (child of second div)'));
appendChild(document.createElement('p')).appendChild(document.createTextNode('fourth paragraph (child of second div)'));
with(style)
{ background="#ee0000";
padding="10px";
}
}
}

So you have omitted variable declaration with this snippet. I'm not sure if that alone has a value of it's own, although I'm quite impressed how compact a script can get. But I fear that your script might have a negative impact on readability and maintainability.

Also, what do I win by not using a variable? Would I rather store the returned node in a variable and work upon that, I'd have a reference to the node stored in that variable and that should be very low on memory consumption as well, if performance concerns are the reason for your hack. Edit: Assumed that "with" is not slow any longer, though I believe it still is

Don't get me wrong, I've nothing against building impressive oneliners, but sometimes I just think: Syntax sugar. ;)

<nitpick>
BTW: Is "with" an operator? I'd rather say it's a control structure, or am I wrong here?
</nitpick>

with is a statement, not an operator, so I stay corrected.
As far as pros and cons of the code it all depends on the task at hand. If there is a need to address one of the nodes later then a variable may be appropriate.
I do not agree with your statement regarding readability and maintainability. It may not look friendly to a novice programmer, but this approach does reflect the tree structure that is being constructed, thus improving maintainability.

Originally posted by Vladdy
It may not look friendly to a novice programmer, but this approach does reflect the tree structure that is being constructed, thus improving maintainability.

For you perhaps... :)

And IMO the tree structure is reflected very badly, because it really takes some time to mentally go through the code and silently add "node" here, "node" there to come up with a decent tree structure in your mind. From the semantics of that code, there is nor real evidence how the tree structure is built, and that's a main drawback of using "with" statements, because they smell (http://c2.com/cgi/wiki?WithBlockCodeSmell)

Not that I wouldn't grok the purpose of this script, I'm just playing a little Advocatus Diaboli to put a different perspective on those things inventing coders marvel at and maintenance programmers start cursing at...

Didn't I read something about with becoming deprecated? Maybe not...

Anyhoo, without the with and only two reference variablesvar s, o;

o = document.body.appendChild( document.createElement('div') );
o.appendChild(document.createElement('p')).appendChild(document.createTextNode('first paragraph'));
o.appendChild(document.createElement('p')).appendChild(document.createTextNode('second paragraph'));

s = o.style
s.background="#00ee00";
s.padding="20px";

o = o.appendChild(document.createElement('div'));
o.appendChild(document.createElement('p')).appendChild(document.createTextNode('third paragraph (child of second div)'));
o.appendChild(document.createElement('p')).appendChild(document.createTextNode('fourth paragraph (child of second div)'));

s = o.style
s.background="#ee0000";
s.padding="10px";Not ragging on your method, Vladdy. It's a cool tip. :D