如何通过JavaScript实现div节点的移动？

<div class="main">
    <div class="left">
    </div>
</div>
<div class="right">
</div>
-————————————————————————————
<div class="main">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>如上的代码中，假如html页面中的代码是线以上的摸样，我如何通过JS的方式让他变成线以下的样子，即——如何通过JavaScript实现class为right的div节点的移动？
页面处理前，class为main的DIV的兄弟节点，现在，我想让他变成class为main的DIV的子节点。
求一段JavaScript代码，谢谢，在线等大家了！急用~~O(∩_∩) 

解决方案 »

  1.   

    直接插到 div.class==main 的后边就好了,什么都不用管\mainObj.appendChild(rightObj)
      

  2.   


    <div class="main">
        <div class="left">
        </div>
        fff
    </div>
    fasfasd
    <div class="right">
     right
    </div><script>
    function getElementsByClassName(className, fetchOne, root) {
        root = root || document;
        var all = root.all || root.getElementsByTagName('*'),
            res = [];
        for(var i=0, len=all.length; i<len; i=i+1) {
            if(all[i].className == className) {
                if(fetchOne) return all[i];
                else
                    res[res.length] = all[i];
            }
        }
        return res;
    }
    window.onload = function() {
        var main = getElementsByClassName('main', true, document),
            right = getElementsByClassName('right', true, document);
        main.appendChild(right);
    };
    </script>
      

  3.   

    方法getElementsByClassName的意思何在，能解释下吗？有点没看懂，谢谢
      

  4.   

    你的DIV只有class属性.
    所以他用此来定位你想要做效果的两个DIV.
      

  5.   

    方法中 root = root || document;
    是啥意思？
      

  6.   

    如果第三个参数.root就为第三个参数;否则为document.
      

  7.   

    如果root为空(强制转换为bool时为false)，就取后面document的值
      

  8.   

    根据单词意思来就行了，
    从元素的class来获取（查找）元素
      

  9.   

    循环出div下的子标签 再判断className是否等于当前的类名
      

  10.   

    我自己出来解释解释吧，呵呵顾名思义，getElementsByClassName函数从名字上看就是“获取具有指定class属性名称的一系列元素集合”。我为这个函数取这个名字是因为楼主给定的HTML元素唯一的特征就是具有“不同的class属性值”，据此我才编写了这个函数的^^下面的是加了注释的getElementsByClassName函数：/**
     * Function Name: getElementsByClassName
     * Description  : 获取具有指定class属性值的一系列元素集合
     * 
     * Arguments    : className: String , 给定的class属性值
     *                  fetchOne : Boolean, 是否只返回满足条件的元素集合中的第一个元素
     *                  root     : HTMLElement, 起始元素, 我们就从这元素下搜索符合条件
     *                                          的HTML元素
     */
    function getElementsByClassName(className/*:String*/, fetchOne/*:Boolean*/, root/*HTMLElement*/) {
        // 如果root参数未给出，默认document元素为起始元素
        root = root || document;
        // 获取起始元素下的所有子元素
        var all = root.all || root.getElementsByTagName('*'),
        // 初始化返回的值集
            res = [];
        // 迭代所有的子元素，如果有class属性等于我们制定的class属性值的元素出现
        // 把它加入到结果集中；若参数fetchOne给定为true，那么我们只要查到第一个
        // 满足条件的元素就将它返回。
        for(var i=0, len=all.length; i<len; i=i+1) {
            if(all[i].className == className) {
                if(fetchOne) return all[i];
                else
                    res[res.length] = all[i];
            }
        }
        // fetchOne 未指定，或者值是false，则返回所有的符合条件的元素集合
        return res;
    }
    下面是调用时的注释版：window.onload = function() {
        // 获取class属性为'main'的元素集合中的第一个元素
        var main = getElementsByClassName('main', true, document),
        // 获取class属性为'right'的元素集合中的第一个元素
            right = getElementsByClassName('right', true, document);
        // 将class属性为right的元素追加到class属性为main的元素末尾
        main.appendChild(right);
    };
      

  11.   

    框架是可以解决很多问题，但这种小问题就不必了吧还是用id来解决问题比较好，因为一个页面中有可能很多地方用到相同的class，这样不保险
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    <script language="javascript" type="text/javascript">
        window.onload = function() {
            var d = document.getElementById("div1");
            var p = d.parentNode;
            p.removeChild(d);
            var m = document.getElementById("divMain");
            m.appendChild(d);
        }
    </script>
    </head>
    <body>
    <div id="divMain" class="main">
        <div class="left">
        </div>
    </div>
    <div id="div1" class="right">
    </div>
    </body>
    </html>