javascript - Does element.appendChild(node) applies properties of parent node to child node? -

i new html , js. need create dynamic expand-collapse list. var parentid = document.getelementbyid("abcd") parentid.setattribute("data-toggle","collapse") parentid.setattribute("data-target","#collapse1") var tag = document.createelement("ul"); tag.setattribute("id","collapse1") tag.appendchild(document.createtextnode("pqr")) parentid.appendchild(tag)

trying list as- abcd pqr

so in case, when clicking on abcd, pqr gets expanded/collapsed. problem on clicking on pqr, gets collapsed again. properties of parent gets applied child node also?

it's not gets properties of it's parent, has how events handled, event bubbling. when click child element, click event if fired parent elements of clicked on

to cancel event bubbling when click appended elements need event.stoppropagation() inside of click handler new elements

after append them following

// tag.appendchild code goes here, following  document.queryselector("#collapse1").onclick=function(event){     event.stoppropagation(); } 

also, should mention 10 times easier jquery