为什么点了按钮没有反应?

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

    <style>

    .left,

    .right {

        width: 300px;

        height: 120px;

    }

    

    .left div,

    .right div {

        width: 100px;

        height: 90px;

        padding: 5px;

        margin: 5px;

        float: left;

        border: 1px solid #ccc;

    }

    

    .left div {

        background: #bbffaa;

    }

    

    .right div {

        background: yellow;

    }

    </style>

</head>


<body>

    <h2>动态创建元素节点</h2>

    <button>点击通过jQuery动态创建元素节点</button>

    <script type="text/javascript">

    var $body = $('body');

    $body.on('click', function() {

        //通过jQuery生成div元素节点

        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

        $body.append(div)

    })




    // var body = document.querySelector('body');


    // document.addEventListener('click',function(){


    //  //创建2个div元素

    //  var rightdiv = document.createElement('div')

    //  var rightaaron = document.createElement("div");


    //  //给2个div设置不同的属性

    //  rightdiv.setAttribute('class', 'right')

    //  rightaaron.className = 'aaron'

    //  rightaaron.innerHTML = "动态创建DIV元素节点";


    //  //2个div合并成包含关系

    //  rightdiv.appendChild(rightaaron)


    //  //绘制到页面body

    //  body.appendChild(rightdiv)


    // },false)

    </script>

</body>


</html>


joyboy0405
浏览 1265回答 1
1回答

stone310

这段是指点击body上任何元素(包括文本元素,<h2>,<button>)就会新创建一个div,可以执行啊
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery