javascript recursive appendChild function

[samuel.adam]

Hi all,

I am coding an AJAX DHTML whatever application and I was fed up with
always typing a lot of appendChild() functions.

I created a custom one called append_children() and wanted to share it
if anyone need such a function.

function append_children() {
var a = append_children.arguments;
for ( var i = a.length - 1; i > 0 ; i-- ) {
try {
a[i-1].appendChild(a[i]);
} catch(e) {
for ( var j = 0; j < a[i].length; j++ ) {
append_children(a[i-1], a[i][j]);
}
}
}
}

You can see a working example with this URL :
http://amisphere.blogspot.com/2005/0...pendchild.html

If anyone has some suggestions about modifications or other ways to
achieve this task, please post...

Sam

[Martin Honnen]

sa*********@gmail.com wrote:

I am coding an AJAX DHTML whatever application and I was fed up with
always typing a lot of appendChild() functions.

I created a custom one called append_children() and wanted to share it
if anyone need such a function.

function append_children() {
var a = append_children.arguments;
You should simply use
var a = arguments;
here as functionName.arguments is deprecated.
for ( var i = a.length - 1; i > 0 ; i-- ) {
try {
a[i-1].appendChild(a[i]);
} catch(e) {
for ( var j = 0; j < a[i].length; j++ ) {
append_children(a[i-1], a[i][j]);
}
}
}
}

You can see a working example with this URL :
http://amisphere.blogspot.com/2005/0...pendchild.html

You do not explain in your post here what is supposed to be passed to
the function but in the article at that URL you do so I borrow from there:

You want to replace the code

function menu_create() {
// create HTML nodes
menu_div = document.createElement('div');
menu_span1 = document.createElement('span');
menu_span1_txt = document.createTextNode(' Buy ');
menu_span2 = document.createElement('span');
menu_span2_txt = document.createTextNode(' Sell ');
menu_span3 = document.createElement('span');
menu_span3_txt = document.createTextNode(' Share ');

// join the nodes together
menu_span1.appendChild(menu_span1_txt);
menu_span2.appendChild(menu_span2_txt);
menu_span3.appendChild(menu_span3_txt);
menu_div.appendChild(menu_span1);
menu_div.appendChild(menu_span2);
menu_div.appendChild(menu_span3);

// show the menu on the page
document.body.appendChild(menu_div);
}

menu_create();

with the code

function append_children() {
var a = append_children.arguments;
for ( var i = a.length - 1; i > 0 ; i-- ) {
try {
a[i-1].appendChild(a[i]);
} catch(e) {
for ( var j = 0; j < a[i].length; j++ ) {
append_children(a[i-1], a[i][j]);
} } }
}

function menu_create() {
// create HTML nodes
menu_div = document.createElement('div');
menu_span1 = document.createElement('span');
menu_span1_txt = document.createTextNode(' Buy ');
menu_span2 = document.createElement('span');
menu_span2_txt = document.createTextNode(' Sell ');
menu_span3 = document.createElement('span');
menu_span3_txt = document.createTextNode(' Share ');

// join the nodes together and show the menu on the page
append_children(document.body, menu_div, [[menu_span1, menu_span1_txt],
[menu_span2, menu_span2_txt],[menu_span3, menu_span3_txt]]);

}

menu_create();
That does not create the same DOM structure however, the original code
creates the text nodes as child nodes of the <span> elements e.g.

<div><span> Buy </span><span> Sell </span><span> Share </span></div>

while with your function (if it works at all) you get the <span>
elements and the text nodes as siblings e.g.

<div><span></span> Buy <span></span> Sell <span></span> Share </div>

That is what happens with Mozilla and IE, Opera 8 does not intend to
play to your rules "if the child element is an array, the appendChild
function fails" and creates only a <div> element.

So you need to recode your function to achieve the same structure as the
original code.

And you should try to avoid try/catch respectively hoping on some error
being thrown, if you know that some elements in the array passed in can
be arrays itself then you can check whether the element has a length
property and then process it recursively as you want.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[samuel.adam]

Hi Martin,

You should simply use
var a = arguments;
here as functionName.arguments is deprecated.
Thanks for the tip, i just used my Javascript Bible 5th edition where
it still shows the functionName.arguments as an example.
You do not explain in your post here what is supposed to be passed to
the function but in the article at that URL you do so I borrow from there:

You want to replace the code

function menu_create() {
// create HTML nodes
menu_div = document.createElement('div'); .... }

menu_create();
That does not create the same DOM structure however, the original code
creates the text nodes as child nodes of the <span> elements e.g.

<div><span> Buy </span><span> Sell </span><span> Share </span></div>

while with your function (if it works at all) you get the <span>
elements and the text nodes as siblings e.g.

<div><span></span> Buy <span></span> Sell <span></span> Share </div>

That is what happens with Mozilla and IE, Opera 8 does not intend to
play to your rules "if the child element is an array, the appendChild
function fails" and creates only a <div> element.

Oops ! :) I feel so stupid now...

I checked the example with the DOM Inspector, looks like i was too
tired to see my mistakes.
So you need to recode your function to achieve the same structure as the
original code.

Sir, yes, sir.
And you should try to avoid try/catch respectively hoping on some error
being thrown, if you know that some elements in the array passed in can
be arrays itself then you can check whether the element has a length
property and then process it recursively as you want.

I used the try/catch method to detect whether an element is an array or
not because there is no ( typeof x == array ) and a TextNode has a
length property.

You are right, this is not elegant at all. With a night of sleep, a
better method is :

if ( element.nodeType ) alert( element + ' is a node.');
else alert( element + ' should be an array.');

Well, i have recoded the function with my brain plugged. I'm not very
satisfied but the final version works fine with Mozilla, IE and Safari.

I wanted to use the arguments.callee.caller but it doesn't work with
Safari, so i have done it this way :

I want to append a document structure at once, modeled with arrays.

To obtain this structure :
<div><span></span><span></span></div><span></span>

I feed the append_children function this way :
append_children([[document.body, div, [[span1, span1_txt], [span2,
span2_txt]]], [document.body, [span3, span3_txt]]]);

The solution works this way :
1. I use a recursive function to remove the arrays
2. While removing those arrays, i record the array structures inside a
global variable
3. I use this structure variable to append the children nodes to the
document

Working example :
http://test.amisphere.com/code/append_children.html

Can you make a few comments on what i could improve in the code ?

--
Sam
http://amisphere.blogspot.com/
--