如何将.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 的类名是唯一的,这样一句就可以了,不唯一那么你需要做的就是找到对应的元素即可