Chaining appendChild

[slobad23]

Is there something special I have to do in order to get a statement like this to work:

//assuming that all newDiv's have been created (proven as it worked for one append child at a time

document.getElementsByTagName("body")[0].appendChild("newDiv1").appendChild("newDiv2").appendChild("newDiv3");

I'm sure there is a reason why this doesn't work - would someone please be able to explain why?

 

[vacunita]

The statement doesn't make sense, at least to me. You are trying to append a Child to the first element of the oollection returned by the getElementsByTagName. After that, since appendChild is a method of the first element, it has no append function of its own. So appending a second child is not really possible. Same applies to the third one.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[feherke]

Hi

Just as Phil mentioned :

Return Value
[tt]Node[/tt] The node added.

( Document Object Model Core | Fundamental Interfaces: Core Module | Interface Node | Methods | appendChild )

To be able to chain, you need a method to return the object itself. No such method exists, but as JavaScript is prototype based, you can add it yourself :

Node[teal].[/teal][b]prototype[/b][teal].[/teal]chainableAppendChild[teal]=[/teal][b]function[/b] [teal]([/teal]newChild[teal])[/teal] [teal]{[/teal]
  [b]this[/b][teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]what[teal])[/teal]
  [b]return[/b] [b]this[/b]
[teal]}[/teal]

Then you will be able to chain the calls :

document[teal].[/teal]body[teal].[/teal][COLOR=darkgoldenrod]chainableAppendChild[/color][teal]([/teal]newDiv1[teal]).[/teal][COLOR=darkgoldenrod]chainableAppendChild[/color][teal]([/teal]newDiv2[teal]).[/teal][COLOR=darkgoldenrod]chainableAppendChild[/color][teal]([/teal]newDiv3[teal])[/teal]

Note that
[ul]
[li]Is stupid to parse the entire DOM tree for tags with the name 'body' and then use the returned collection's first element. You can reference it directly as [tt]document.body[/tt].[/li]
[li][tt]appendChild()[/tt]'s parameter has to be a [tt]Node[/tt], you can not pass a string and expect to automagically transform into [tt]Node[/tt] in the DOM tree.[/li]
[/ul]


Feherke.

http://feherke.github.com/

 

[slobad23]

Thank you.

I think there is a very basic misunderstanding of how the chaining is supposed to work.

I thought the code would appendChild the node, then once complete, move down the chain to the next appendChild call and so on.

body = blank
appendChild (1st)
body = div1
appendChild (2nd)
body = div1, div2
appendChild (3rd)
body = div1, div2, div3

Obviously I was wrong about this. Thanks for clearing it up!

 

[vacunita]

I think I misunderstood what you were attempting and also misread the code.

Ignoring what I posted above....

Your code will in fact append each successive element to the previous one.

Creating 3 concentric divs one inside the other

NewDiv3 inside NewDiv2 which will be inside newdiv1 which is inside the first element of the body tag.
--------------------
| ---------------- |
| | ------------ | |
| | | newDIV3 | | |
| | |____________| | |
| |________________| |
|____________________|




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech