function rearrange(x, y) {
x.parentNode.replaceChild(x, y);
x.parentNode.insertBefore(y,x);
}
如果我这样做
var a = document.getElementsByClassName('btn-button-google')[0];
var b = document.getElementsByClassName('btn-button-doodle')[0];
rearrange(b,a);
我收到以下错误
NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
我理解,因为a在一个html div中,b在另一个div中,但我很好奇如何解决这个问题。这工作
rearrange(b.parentNode,a.parentNode);
因为它们在同一个节点中。
示例HTML
<div class="container">
<div class="group">
<a href="" class="btn-button-bold"><a>
<a href="" class="btn-button-italic"><a>
<a href="" class="btn-button-strike"><a>
</div>
<div class="group">
<a href="" class="btn-button-font"><a>
<a href="" class="btn-button-ffamily"><a>
<a href="" class="btn-button-google"><a>
</div>
<div class="group">
<a href="" class="btn-button-smilies"><a>
<a href="" class="btn-button-doodle"><a>
<a href="" class="btn-button-source"><a>
</div>
</div>
答案 0 :(得分:2)
.replaceChild
方法接受替换作为第一个参数,将子替换为第二个参数。你让它们反转,这导致错误。
此外,如果意图是交换,您需要保留对y
原始位置的引用,因为一旦移动它,它就会被遗忘。
这适用于大多数情况:
var yPar = y.parentNode, ySib = y.nextSibling;
x.parentNode.replaceChild(y, x);
yPar.insertBefore(x, ySib);
请记住,还有一个需要考虑的问题。只要两个节点具有不同的父节点,但如果共享父节点并且彼此相邻,并且缓存的nextSibling
与x
相同,则不会出现问题,那么它没有任何效果。因此,如果可能的话,你需要对此进行测试,并处理这种特殊情况。