element.appendChild(node)是否将父节点的属性应用到子节点

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

本文关键字:属性 应用 子节点 父节点 appendChild node 是否 element      更新时间:2023-09-26

我是HTML和JS的新手。需要创建动态展开-折叠列表。var parentId = document.getElementById("ABCD")parentId.setAttribute("data-toggle"、"崩溃")parentId.setAttribute("数据目标"、"# collapse1")var tag = document.createElement("ul");tag.setAttribute("id"、"collapse1")tag.appendChild (document.createTextNode("PQR"))parentId.appendChild(标签)

尝试列表为-ABCDPQR

所以在这种情况下,当我点击ABCD, PQR得到扩展/折叠。但问题是,点击PQR,它又崩溃了。父节点的属性也会应用到子节点吗?

这并不是说它获得了父类的属性,这与如何处理事件有关,特别是事件冒泡。当您单击子元素时,将为您所单击的所有父元素触发一个click事件

要取消事件从冒泡当你点击附加的元素,你需要event.stopPropagation()内的点击处理程序的新元素

在附加它们之后执行以下操作

// tag.appendchild code goes here, then do the following
document.querySelector("#collapse1").onclick=function(event){
    event.stopPropagation();
}

还有,我应该提一下,所有这些都将比使用jQuery容易10倍