Question

只想要一个将第二个节点移动到第一个节点的功能。但是它不起作用，有什么建议吗？

 var node = document.getElementById("ir");
    var cx = node.childNodes[1];
    function der(){
    node.insertBefore(cx,node.firstChild);
}

fullcode：

<div id="ir">
<p id="ie">test</p>
<img src="test.gif">
</div>

<script type="text/Javascript">
var node = document.getElementById("ir");
img.setAttribute("onclick","der()");
var cx = node.childNodes[1];
function der(){
        node.insertBefore(cx,node.previousSibling);
}

Answer 1

http://jsfiddle.net/joeframbach/JSZPy/

小提琴中的html问题是空格。 childNodes[0]匹配第一组空格，childNodes[1]匹配第一个元素。也许这是你的问题。

<div id="ir">
    <p>First</p>
    <p>Second</p>
</div>

var node = document.getElementById("ir");
var first = node.childNodes[1];
var second = node.childNodes[3];
node.insertBefore(second,first);

Answer 2

今天我有点慢，但我认为你对previousSibling的使用是错误的。我认为它应该与子节点cx而不是父节点有关..所以你应该使用cx.previousSibling而不是node.previousSibling - 我已经编辑了mt之前的例子来删除我原来的哑响应...试试这个......

<div id="ir">
<p id="ie">test</p>
<img src="test.gif">
</div>

<script type="text/Javascript">
var node = document.getElementById("ir");
img.setAttribute("onclick","der()");
var cx = node.childNodes[1];
function der(){
    node.insertBefore(cx,cx.previousSibling);
}

两天后编辑!!! .... 当然，上面给出的示例不会交换P元素和图像，因为图像的真实previousSibling是/ P标记闭包和图像之间的换行符。更重要的是从编码的角度来看，它不会起作用，因为在任何地方都没有定义一个名为'img'的对象......所以我提供这个作为工作替代方案：

<script>
function swapDivs(obj) {
  if(obj.previousSibling){ // if it's null, then it's already the first element //
    obj.parentNode.insertBefore(obj, obj.previousSibling);
  }
}
</script>

<div id="ir">
  <p id="ie">test</p><img src="http://i2.ifrm.com/4639/142/emo/drool.gif" onclick="swapDivs(this);" />
</div>

它没有解决换行问题，我只是重新格式化了HTML。

但是，它确实解决了img问题，并提供了将函数添加到任何可点击DOM对象的通用方法，而无需自定义函数。

我会留给你研究如何克服换行符/空格兄弟的问题，但这不应该是困难的。如果您想测试您的尝试，可以使用以下小提琴...... http://jsfiddle.net/radiotrib/ps9XZ/

Answer 3

你有答案，但我建议你这样做：

var node = document.getElementById("ir");
var childs = node.getElementsByTagName("div");
var cx = childs[1];

function der()
{
    node.removeChild(cx);
    node.insertBefore(cx, childs[0]);
}

der();

Answer 4

我建议你在处理子节点时不要放置空格或分界线，因为它们正在考虑像文本类型的孩子一样。我希望这段代码可以帮到你： Javascript代码：

function change(){
    var parent = document.getElementById("ir");
    var img = parent.childNodes[1];
    parent.removeChild(img);
    parent.insertBefore(img, parent.firstChild);
}

HTML code：

<div id="ir"><p id="ie">test</p><img src="test.gif"></div>
<button onclick="change()">Change</button>

将节点从第二个移动到第一个

4 个答案: