qq_34571911
2019-03-15 13:30
采纳率: 92.7%
浏览 2.9k
已采纳

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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

9条回答 默认 最新

  • qq_36718671 2019-03-16 10:20
    已采纳
    <!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>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • /*空山*/ 2019-03-15 13:52
    document.getElementsByClassName("bb").innerHTML='<div class="aa"></div>'
    
    评论
    解决 无用
    打赏 举报
  • 1进击的小白 2019-03-15 14:10

    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" />
    
    评论
    解决 无用
    打赏 举报
  • 蓄电池 2019-03-15 14:40
    $(#aa).html("<div class='bb'></div>")
    
    评论
    解决 无用
    打赏 举报
  • ZERO-SX 2019-03-15 14:56

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

    评论
    解决 无用
    打赏 举报
  • 燕双嘤嘤 2019-03-15 16:10

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

    评论
    解决 无用
    打赏 举报
  • qq_28274571 2019-03-15 20:07

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

    评论
    解决 无用
    打赏 举报
  • zhumengniao 2019-03-21 16:44

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

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题