问答详情
源自：3-3 DOM内部插入prepend()与prependTo()

这段代码哪里错了 为什么prependTo（）点击没反映？

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>环境搭建</title>
   <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
   <style type="text/css">
       .aaron1{
           border: 1px solid red;
       }
       .aaron1 p{
           color: red;
       }
       .aaron2{
           border:1px solid blue ;
       }
       .aaron p{
           color:blue;
       }
   </style>
</head>
<body>
<h2>通过prepend与prependTo添加元素</h2>
<button id="btn1">点击通过jQueryd的prepend添加元素</button>
<button id="btn2">点击通过jQueryd的prependTo添加元素</button>
<div class="aaron1">
   <p>测试prepend</p>
</div>
<div class="aaron2">
   <p>测试prepend</p>
   <script type="text/javascript">
       $("#btn1").on("click",function () {
           $(".aaron1").prepend("<p>prepend增加的p元素</p>")
       })
   </script>
   <script type="text/javascript">
       $("#btn2").on("click",function () {
           $("<p>prependTo添加的元素</p>").prependTo($("aaron2"))
       })
   </script>
</div>
</body>
</html>

提问者：慕数据1201694 2016-12-14 13:57

个回答

  • Alexey
    2016-12-14 14:16:38
    已采纳

    <script type="text/javascript">
           $("#btn1").on("click",function () {
               $(".aaron1").prepend("<p>prepend增加的p元素</p>")
           }), $("#btn2").on("click",function () {
               $("<p>prependTo添加的元素</p>").prependTo($("aaron2"))       })
       </script>

    上面的prependTo($("aaron2"))  应该写成 prependTo(".aaron2")

    0
  • qq_逐梦之旅GO_0
    2018-10-28 16:40:04

    <script type="text/javascript">
        $("#bt1").on('click', function() {
            //找到class="aaron1"的div节点
            //然后通过prepend在内部的首位置添加一个新的p节点
            $('.aaron1')
                .prepend('<p>prepend增加的p元素</p>')
        })
        </script>
        <script type="text/javascript">
        $("#bt2").on('click', function() {
            //找到class="aaron2"的div节点
            //然后通过prependTo内部的首位置添加一个新的p节点
            $('<p>prependTo增加的p元素</p>')
                .prependTo($('.aaron2'))
        })
        </script>

    这样也没错吧

    0