Document.createElement() vs Document.createTextNode() - Javascript

Question

I'm trying to figure out what is the differences between this two:

// first one
var h1 = document.createElement('h1');
var t = document.createTextNode('hey');
h1.appendChild(t);
document.body.appendChild(h1);

// second one
document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')));

The first (Document.createElement()) works perfectly, but the second (Document.createTextNode()) does not.

Because appendChild returns the appended node, so you're trying to append a text node to body... — Andrew Li
– Andrew Li, Commented Dec 13, 2016 at 14:14
the result of document.createElement('h1').appendChild(document.createTextNode('hey') is the text node ... therefore you are appending the text node to the body — Jaromanda X
– Jaromanda X, Commented Dec 13, 2016 at 14:14

Quentin · Accepted Answer · 2016-12-13 14:15:37Z

3

The return value of appendChild is the appended child.

So if we add variables to:

document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')));

it gets broken down into:

var text = document.createTextNode('hey');
var h1 = document.createElement('h1');
h1.appendChild(text);
document.body.appendChild(text);

Appending the text to the body removes the text from the h1.

The h1 is discarded because it is never appended anywhere.

answered Dec 13, 2016 at 14:15

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roni Koren Kurtberg Over a year ago

Now, let's assume i'm starting with document.body.appendChild(document.createElement('h1')); and this h1 tag doesn't have id, so how can I add to this tag some text?

Quentin Over a year ago

You'd have to search the document for it. Use a variable. Don't try to stuff multiple operations into a single statement.

Roni Koren Kurtberg Over a year ago

OK. Iv'e tried to code it in one line because I need to build an entire html page in JS. :)

Victor Stoddard Over a year ago

h1.innerText does the same thing as working with text nodes, and is much easier.

Roni Koren Kurtberg · Accepted Answer · 2016-12-13 14:36:19Z

0

I find a way to do it: (just add .parentNode at the end)

document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')).parentNode);

answered Dec 13, 2016 at 14:36

Roni Koren Kurtberg

5151 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Document.createElement() vs Document.createTextNode() - Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related