您的位置：首页 > Web前端 > JQuery

JS传统的节点创建和JQuery的比较

2017-10-31 20:17 381 查看
<!-- DOM创建节点及节点属性 -->
<!DOCTYPE html>

<html>

<head>

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

    <title></title>

    <style>

    .left,

    .right {

        width: 300px;

        height: 120px;

    }

    

    .left div,

    .right div {

        width: 100px;

        height: 90px;

        padding: 5px;

        margin: 5px;

        float: right;

        border: 1px solid #ccc;

    }

    

    .left div {

        background: #bbffaa;

    }

    

    .right div {

        background: yellow;

    }

    </style>

</head>

<body>

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

    <div class="left">

        <div class="aaron">点击body区域会动态创建元素节点</div>

    </div>

    <script>

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

        document.onclick=function ()

        {

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

    var rightaaron=document.createElement('div') ;

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

    rightaaron.className='arron';

    rightaaron.innerHTML='动态创建元素节点';

    rightdiv.appendChild(rightaaron);

    body.appendChild(rightdiv);

        }

    </script>

    </body>
    <!-- JQuery节点创建与属性处理 -->

    <!--创建元素节点 $('<div></div') -->

    <!-- 创建文本节点$('<div>我是文本节点</div') -->

    <!-- 创建元素节点$('<div id='test' class='aaron'>我是文本节点</div>) -->

    <!-- 上述的例子使用JQuery一句话就搞定了 -->
    <!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');

    var $body.on('click',function(){var div =$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")})

    </script>

</body>

&
4000
lt;/html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航