I'm getting started with JavaScript and the DOM, trying to purposely stay away from jQuery and the like, at least for a little while. With that in mind, tutorials generally provide an example such as this:

h = document.createElement("h1");
t = document.createTextNode("Hello.");
h.appendChild(t);
document.body.appendChild(h);

In an attempt to streamline this and avoid variables, I successfully chained the following:

document.body.appendChild(document.createElement("h1")).appendChild(document.createTextNode("Hello."));

While this works, I tried to shorten the following prepend operation:

h = document.createElement("h1");
t = document.createTextNode("Put this on top.");
h.appendChild(t);
document.body.insertBefore(h,document.body.firstChild);

with the following:

document.body.insertBefore(document.createElement("h1")).appendChild(document.createTextNode("Put this on top."),document.body.firstChild);

But this time it didn't work as desired: the text is placed at the very end of the BODY element, obtaining an append instead of a prepend.

I imagine the successful first case is just a fluke, but I can't see what's wrong with this chaining practice.

I'm getting started with JavaScript and the DOM, trying to purposely stay away from jQuery and the like, at least for a little while. With that in mind, tutorials generally provide an example such as this:

h = document.createElement("h1");
t = document.createTextNode("Hello.");
h.appendChild(t);
document.body.appendChild(h);

In an attempt to streamline this and avoid variables, I successfully chained the following:

document.body.appendChild(document.createElement("h1")).appendChild(document.createTextNode("Hello."));

While this works, I tried to shorten the following prepend operation:

h = document.createElement("h1");
t = document.createTextNode("Put this on top.");
h.appendChild(t);
document.body.insertBefore(h,document.body.firstChild);

with the following:

document.body.insertBefore(document.createElement("h1")).appendChild(document.createTextNode("Put this on top."),document.body.firstChild);

But this time it didn't work as desired: the text is placed at the very end of the BODY element, obtaining an append instead of a prepend.

I imagine the successful first case is just a fluke, but I can't see what's wrong with this chaining practice.

• javascript
• dom

Share Improve this question Follow asked Dec 17, 2012 at 20:42 ezequiel-garzonezequiel-garzon 3,13766 gold badges3131 silver badges3434 bronze badges 4

• 1 You've closed your insertBefore() parens after the createElement(). So the chain seems to have continued with the appendChild() method. Which surprises me, I would've expected an error. – David Thomas Commented Dec 17, 2012 at 20:48
• 1 Though chaining like this is interesting as a way to understand how these methods work, the result is harder to read. Having to scroll right to see the whole statement is kind of annoying, but you can put a line break before .appendChild() or after the opening parens from one or more methods... – nnnnnn Commented Dec 17, 2012 at 20:51
• 1 Use a minifying tool to "streamline and avoid variables" - you're just making your code harder to read, maintain, and extend. – jbabey Commented Dec 17, 2012 at 20:57
• You're right, David... Sorry for the confusion. I now expect an error too! Thanks to all for the feedback. – ezequiel-garzon Commented Dec 17, 2012 at 21:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You have parenthesis in the wrong places. Your line:

document.body.insertBefore( document.createElement("h1") )
.appendChild( document.createTextNode("Put this on top."), document.body.firstChild );

How it should be:

document.body.insertBefore(
    document.createElement("h1").appendChild(
        document.createTextNode("Put this on top.")), document.body.firstChild);

Now you understand why this is generally a bad idea to merge all in one line.

Ok, this fixed line will not give you exact behavior of your code 'with variables'. This is because .appendChild returns the child DOM element (<INPUT> in your case), not the parent (<H1> in your case). But you want so that all <H1> DOM element was added at the beginning of document. To achieve this in one line you need to use .parentNode property:

document.body.insertBefore(
    document.createElement("h1").appendChild(
        document.createTextNode("Put this on top.")).parentNode, document.body.firstChild)

Guys, please do not use such code, this is just for educational purposes)))