我想移动div节点，但是怎么移动？

Question

<div class="x">
    <div  class="x1">111</div>
    <div  class="x1">222</div>
    <div  class="x1">333</div>
</div>
<script>
    function cla(element){
        return document.getElementsByClassName(element);
    }
    function $(element){
        return document.getElementById(element);
    }

    function xx(){
        $("x").insertBefore(cla("x1")[1],cla("x1")[0])
    }
    xx();
</script>

我一开始想到的是insertBefore（），但是这个怎么用？为何我这里报错？

还有什么办法能真正移动节点吗？

Answer 1

示例：

    <div class="x">
        <div class="x1">111</div>
        <div class="x1">222</div>
        <div class="x1">333</div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $('p').insertBefore('.x');
        //或者
         $('.x').insertBefore('p');
    </script>

**你上面那些函数有个getElementById(element)
但是你的标签里哪有ID？**

原生JS使用方式

        var x = document.getElementsByClassName('x')[0];
        var p = document.getElementsByTagName('p')[0];
        x.insertBefore(p, x.childNodes[0]);//第一个参数：要插入的标签，第二个参数：在哪个标签之前插入

如果直接改你的代码就是：

<div class="x" id="x"> //加上ID

js改成

$("x").insertBefore(cla("x1")[1], $("x").childNodes[0]);

Answer 2

纠正一下、
你的$()方法里面写的是ID选择节点

可是你调用的是class名
具体

function $(element){
    return document.getElementById(element);
}
 $("x")
 <div class="x">
 

看到错误就想指出了