How to use createElement() in JavaScript?

Question

    var htmlComponent = [
                {
                    element : 'button',
                    text : "Addition"
                },
                {
                    element : 'h1',
                    text : "This is the heading"
                },
                {
                    element : 'p',
                    text : "This is the paragraph."
                }
            ];

    htmlComponent.forEach(function(item) {

          // Problem here

 document.body.appendChild(document.createElement(item.element).appendChild(document.createTextNode(item.text)));
    }

Actually I wanted to create an html element using DOM Object but this is not working. I mean my code is not working properly..

but when I changed something Like that:

htmlComponent.forEach(function(item) {
    var _element = document.createElement(item.element);
    var text = document.createTextNode(item.text);
   _element.appendChild(text);
    document.body.appendChild(_element);
}

Then the code is working.

Here the main question is why 2nd code is working and the 1st one is not working...... what is the problem in my code.

please Explain me........

because appendChild does not return parent node where addition was — MysterX
– MysterX, Commented Dec 13, 2017 at 9:47
You should visit this w3schools.com/jsref/met_document_createelement.asp — user4880283
– user4880283, Commented Dec 13, 2017 at 9:48

Harun · Accepted Answer · 2017-12-13 09:56:09Z

1

You are chaining the calls together like body.createElement().appendChild() where you shouldn't.

This works with createElement() because it returns the element you want to append to, but it doesn't work with appendChild() because that returns the child you just appended, which you are then appending again to the body.

This programming style is known as a "fluent" interface. It is supported by some libraries e.g. jQuery, but not by native Javascript DOM functions.

See https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

answered Dec 13, 2017 at 9:56

Harun

1,6721 gold badge12 silver badges9 bronze badges

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

Comments

Nisal Edu · Accepted Answer · 2017-12-13 10:00:46Z

1

Try as follows

appendChild does not return parent

var htmlComponent = [{
    element: 'button',
    text: "Addition"
  },
  {
    element: 'h1',
    text: "This is the heading"
  },
  {
    element: 'p',
    text: "This is the paragraph."
  }
];

htmlComponent.forEach(function(element) {

  var btn = document.createElement(element.element); 
  var t = document.createTextNode(element.text);
  btn.appendChild(t);
  document.body.appendChild(btn);

});

edited Dec 13, 2017 at 10:00

answered Dec 13, 2017 at 9:50

Nisal Edu

7,6294 gold badges32 silver badges38 bronze badges

Comments

maxpaj · Accepted Answer · 2017-12-13 10:11:32Z

0

According to the documentation for appendChild:

The returned value is the appended child except when the given child is a DocumentFragment, in which case the empty DocumentFragment is returned.

You are appending a text node to the button, then trying to append the returned result to the body. This is the reason why you are not seeing the button being appended to the body.

If you break it down like this, it's easier to see what's going on:

document.body.appendChild(

   // createElement returns button
   document.createElement("button")

     // button.appendChild then returns the appended child (a text node)
     .appendChild(document.createTextNode("text"))
)

edited Dec 13, 2017 at 10:11

answered Dec 13, 2017 at 9:56

maxpaj

6,9717 gold badges41 silver badges64 bronze badges

2 Comments

kusama Over a year ago

Thanx... I understand whats going on here may be Second replace the first correct if I am wrong..

maxpaj Over a year ago

Hm no, that would not work. I would actually go with the second approach you had. That made more sense.

Collectives™ on Stack Overflow

How to use createElement() in JavaScript?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related