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

Question

I am new to HTML and JS. Need to 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 for list as- ABCD PQR

So in this case, when i am clicking on ABCD, PQR gets expanded/collapsed. But the problem is on clicking on PQR, it gets collapsed again. So does the properties of parent gets applied to child node also?

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

it's not that it gets properties of it's parent, this has to do with how events handled, specifically event bubbling. When you click a child element, a click event if fired for all parent elements of what you clicked on

to cancel the event from bubbling when you click the appended elements you need to event.stopPropagation() inside of a click handler for the new elements

after you append them do the following

// tag.appendchild code goes here, then do the following

document.querySelector("#collapse1").onclick=function(event){
    event.stopPropagation();
}

also, i should mention all this would be 10 times easier with jQuery

edited May 23 '17 at 12:06

Community

1
1

answered Oct 03 '15 at 01:36

dave.mcalpine

407
2
7

Thanks, but i can disable it? I am can i register specific another event to child element? – Meghana M Oct 03 '15 at 01:40
i updated my answer, you can stop it with `event.stopPropagation` – dave.mcalpine Oct 03 '15 at 01:46

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

1 Answers1