js将一个DIV 插入到另外一个标签里。

如何将.aa用JS插入到.bb里,说明{bb不能加“id”因为id已经被别的程序占了。只能用class名了。}为什么不直接HTML写进去,因为中间隔着N个DIV,所以想用JS实现将aa插入到bb里。

<style>
.aa{width:100px;height:100px;background-color:#eeeeee;position:relative; z-index: 1;  }
.bb{width:200px;height:200px;background-color: #FF0000;padding:30px;}
</style>
<div class="aa"></div>
<embed class="bb" src="helloworld.swf" />

想JS实现出来的效果就相当于这样的。

<embed class="bb" src="helloworld.swf" />
<div class="aa"></div>
</embed>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- script src="jquery/jquery.js"></script -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<style type="text/css">
.aa{width:100px;height:100px;background-color:#eeeeee;position:relative; z-index: 10;  }
.bb{width:200px;height:200px;background-color: #FF0000;padding:30px;}
</style>
</head>
<body>

    <div class="aa">3333333</div>
    <div>
       <embed class="bb" src="helloworld.swf" /></embed>
    </div>
    <div>
       <button class="btn1">移动aa到bb中</button>
    </div>
    <!-- div class="bb">bb</div -->

    <!-- 注意需要jQuery插件 -->
    <script type="text/javascript">
         //如果是DIV就直接复制进去
         // $(".bb").append($(".aa"));

    $(document).ready(function(){
        //按钮事件
      $(".btn1").click(function(){
          //获得.BB坐标
             var x = $(".bb").offset().left;
             var y = $(".bb").offset().top;
             //改变AA文字
             $(".aa").html("<span>移动了</span>" + "X:" + x +" Y:"+ y);
             //设置AA坐标到BB中 动画效果
             $(".aa").animate({left:x}, 600);
             $(".aa").animate({top:y}, 600);
      });

    });
    </script>


</body>
</html>
document.getElementsByClassName("bb").innerHTML='<div class="aa"></div>'

document.getElementsByClassName("bb")[0].innerHTML=document.getElementsByClassName("aa")[0].outerHTML

.aa { width: 100px; height: 100px; background-color: #eeeeee; position: absolute; z-index: 9999; margin: 75px; } .bb { width: 200px; height: 200px; background-color: #FF0000; padding: 30px; }
    <div class="aa"></div>
    <embed class="bb" src="helloworld.swf" />
$(#aa).html("<div class='bb'></div>")

$('.bb').append($('.aa'))

看了一下大家的回复,感觉挺多方法,不太清楚博主你说的那个移动插入的意思:我的理解使你可以先在bb内部创建一个aa,然后再将原来的aa删除就可以了吧

克隆aa 元素到bb元素中,如果需要具体bb的位置,另外考虑增加的方式
$(".aa").clone().prependTo(".bb");
$("原来aa的父类").detach(".aa");从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
注明:在用$(".bb").append($(".aa")); 是在 class 为 bb的div内末尾增加元素。

document.querySelector('.bb').appendChild(document.querySelector('.aa') )如果aa和bb 的类名是唯一的,这样一句就可以了,不唯一那么你需要做的就是找到对应的元素即可