jQuery节点创建与属性的处理

来源：互联网发布：关系数据库中关系是指编辑：程序博客网时间：2024/05/24 05:54

jQuery节点创建与属性的处理

创建元素节点：

可以有几种方式，常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")

$("<div></div>")

创建为本节点：

与创建元素节点类似，可以直接把文本内容一并描述

$("<div>我是文本节点</div>")

创建为属性节点：

与创建元素节点同样的方式

$("<div id='test' class='aaron'>我是文本节点</div>")

一条一句就搞定了，跟写HTML结构方式是一样的

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

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.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');    alert(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>

阅读全文

0 0