1

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

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

完整代码：

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

4 回答 4

3

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);
于 2013-03-21T16:23:39.153 回答
1

我今天有点慢，但我认为你对 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/

于 2013-03-21T16:22:20.870 回答
0

您已经得到了答案，但我建议您执行以下操作：

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();
于 2013-03-21T16:26:28.053 回答
0

我建议您在使用子节点时不要放置空格或断线，因为它们考虑的是文本类型的子节点。我希望这段代码对你有帮助： 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>
于 2013-03-21T16:32:58.990 回答