我正在尝试替换某个 div 元素 parent
和另一个newparent
.我只想复制 parent
的一部分的 child 并把他们放在newparent
, 然后替换 parent
通过 newparent
.
这是我的代码片段:
var sb_button = parent.firstChild;
var temp;
while(sb_button) {
console.log("loop: ");
console.log(sb_button.id);
temp = sb_button;
if(sb_button.id != curr_button.id && sb_button.id != prev_button.id) {
console.log("if");
newparent.appendChild(temp);
}
else if(sb_button.id == curr_button.id) {
console.log("elseif");
newparent.appendChild(temp);
newparent.appendChild(prev_button);
}
else {
console.log("else");
}
sb_button.parentNode = parent;
console.log(sb_button.id)
console.log(sb_button.parentNode.children);
sb_button = sb_button.nextSibling;
}
parent.parentNode.replaceChild(newparent,parent);
编辑:
所以当我做 newparent.appendChild(temp)
它修改了 sb_button
.解决方法是什么?
最佳答案
我没有运行你的代码,但有一些奇怪的事情,也许其中之一可能会导致问题或帮助清理代码,使问题更加明显。
- 变量
temp
似乎是sb_button
的别名:您可以删除变量声明并将所有引用替换为temp
sb_button
是一个容易混淆的任意子节点的名字- 您在 if 语句中将
sb_button
中的节点附加到newparent
,但紧接着您尝试设置sb_button_.parentNode
到parent
- 那是 not possible sinceparentNode
is readonly这当然没有意义 - 您不能将元素附加到一个元素但具有不同的父元素。 - 您是否正在尝试复制或移动节点?
编辑:鉴于您要复制节点,我相信您正在寻找 cloneNode
: 制作节点的副本并附加该副本,而不是原始节点。
作为简洁设计的问题,当事情变得复杂时,我会避免这种难以理解的 while 循环。相反,只需制作一个节点数组,按照您想要的方式对这些节点进行排序(您甚至可以使用 sort
来做到这一点,以使其立即显而易见您只是在重新排列事物),然后制作一个函数获取一个 newparent
和数组,并将所有元素的副本按数组顺序附加到 newparent
。您的示例并没有那么复杂,但即使在这里,我也会更改 if 子句的顺序以在最后的 else 中包含“默认”情况。例如:
for(var child = parent.firstChild; child; child = child.nextSibling)
if(child.id == curr_button.id) { //insert prev_button after curr_button
newparent.appendChild(child.cloneNode(true));
newparent.appendChild(prev_button.cloneNode(true));
} else if(child.id != prev_button.id) {
newparent.appendChild(child.cloneNode(true));
}
parent.parentNode.replaceChild(newparent, parent);
这样做的目的是让读者立即明白所有子级只处理一次。
关于javascript - 将一个部门的子元素连同所有相关事件复制到另一个部门,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6248849/