一步创建Javascript createElement和appendchild

Question

i want to create an element and then append this with other elements in one step.

var header = document.createElement("thead").appendChild(document.createElement("tr"));

Why this Code outputs the only TR and not Thead?

When i use this code then its correct (thead + tr are there)

var header = CH.createElement("thead");
    header.appendChild(CH.createElement("tr"));

Answer 1

Because Node.appendChild() returns the appended child ...

var appendedChild = element.appendChild(child);

.. you can simply reference the child's parentNode like so ( sample fiddle ):

var header = document.createElement("thead")
    .appendChild(document.createElement("tr"))
    .parentNode; // the row's parentNode, i.e.: thead

Answer 2

@antisanity has a good solution. Another solution if your variable is pre-declared is to do this...

(header = document.createElement('thead'))
      .appendChild(document.createElement('tr'));

This ensures that the assignment to header happens before the .appendChild() .