jQuery中DOM的应用
1.节点的创建
一般开发这都是先定义好HTML的结构，这样就不够灵活啦，如果需要先通过Ajax获得数据之后才能确定结构，这样就需要动态的处理节点啦，jQuery提供的借口就能帮助我们解决这个问题。
创建流程：
1.创建节点（常见的：元素，属性和文本）
2.添加节点的一些属性
3.加到文档中
流程中设计到的一点方法：
1.创建元素：document.createElement
2.设置属性：setAttribute
3.添加文本：innerHTML
4.加入文档：appendChild
例：通过js原生接口创建
<h2>动态创建元素节点</h2>
<div class="left">
<div class="aaron">点击body区域会动态创建元素节点</div>
</div>
<script type="text/javascript">
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>
通过jQuery可以简化上面的过程
创建元素节点：$("html结构") $("<div></div>")
创建为本节点：$("<div>我是文本节点</div>")
创建为属性节点，与创建元素节点相同的方式：$(“<div id="test" class="arron">我是文本节点</div>”)
可以将上面的代码简化如下：
<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)
})
2. DOM内部插入append()和appendTo()
append 向每个匹配的元素内部追加内容
这个操作与对指定的元素执行原生的appendChild方法添加到文档中的情况类似
appendTo 将所有匹配的元素追加到另一个，指定的元素元素集合中
区别：内容和目标的位置不同
append()前面是被插入的对象，后面是要在对象内插入元素的位置
appendTo()则相反
例：
<h2>通过append与appendTo添加元素</h2>
<button id="bt1">点击通过jQuery的append添加元素</button>
<button id="bt2">点击通过jQuery的appendTo添加元素</button>
<div class="content"></div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//.append(), 内容在方法的后面，
//参数是将要插入的内容。
$(".content").append('<div class="append">通过append方法添加的元素</div>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//.appendTo()刚好相反，内容在方法前面，
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
})
</script>
</body>
3.DOM外部插入after()和before()
after():在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
before():据参数设定，在匹配元素的前面插入内容
注意点： after向元素的后面添加html代码，如果元素后面有了元素了，那将后面的元素后移，然后将html 代 码插入
before向元素的前面添加html代码，如果元素前面有了元素了，那将前面的元素前移，然后将html 代码插入
例：
<h2>通过before与after添加元素</h2>
<button id="bt1">点击通过jQuery的before添加元素</button>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="aaron">
<p class="test1">测试before</p>
</div>
<div class="aaron">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})
</script>
</body>