How do I append a child to all the nodes with the specified classname using pure javascript

Question

var menuheader = document.createElement("li"); 
document.getElementsByClassName("subMenu").appendChild(menuheader);

Above is the code snippet. I get this error:

firebug: TypeError: document.getElementsByClassName(...).appendChild is not a function

Answer 1

It should be

var menuheader = document.createElement("li");// creates main menu to which below submenu should be added. 
var submenus=document.getElementsByClassName("subMenu"); //gives an array so you cannot append child to that.

   for(int i=0;i<submenus.length;i++){
   menuheader.appendChild(submenus[i]);

  }

From your code it seems that you are doing reverse that is adding mainmenu to submenu which again.

  document.createElement("li"); //create a main menu say Services

Services

So I need to add submenu to above element so that it should look like

Services

->Non billable Service

->I.T service

->Billable Service