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

move node from second to first

本文关键字：第一个 移动 第二个 节点      更新时间：2023-09-26

只想要一个将第二个节点移动到第一个节点的函数。但是不管用，有什么建议吗?

 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);
}

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);

我今天有点慢，但我认为你使用的previousSibling是错误的。我认为它应该与子节点cx相关，而不是父节点。所以应该用cx。previousSibling不是节点。@ previousSibling -我已经编辑了之前的例子，删除了我原来的愚蠢回应…

<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/

你已经有了答案，但我建议你这样做:

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();

我建议您在使用子节点时不要使用空格或断行，因为它们被认为是文本类型的子节点。我希望这段代码能帮助你:Javascript代码:

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

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