Jquery Dom操作

下面介绍一些Jquery Dom操作的方法：

先在html中写入如下代码：

<div class="box1">1</div>
<div class="box2">
<p class = "child1">2</p>
<p class = "child2">3</p>
</div>
<div class="box3">4</div>

 

.append()

.append(content[,content]) / .append(function(index,html))

1. 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象

2. 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值

$('p').append('<p>hello</p>')     //在每一个p后面加一个p元素下的hello
$('.box2').append($('.box1'))   //把.box1中的内容加到.box2下

.prepend()

.prepend(content[,content]) / .prepend(function(index,html))

向对象头部追加内容，用法和append类似，内容添加到最开始

.before()

.before([content][,content]) / .before(function)

在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似

$('.box1').before($('.child2'))   //把.child2插入.box1前面

.after()

与.before相反

.remove()

删除被选元素（及其子元素），也可以添加一个可选的选择器参数来过滤匹配的元素

$('.box2').remove()    //输出 1、4
$('p').remove('.child1')  //输出 1、3、4

.empty()

清空被选择元素内所有子元素

$('.box2').empty()   //输出1,4

.html()

这是一个读写两用的方法，用于获取/修改元素的innerHTML

1. 当没有传递参数的时候，返回元素的innerHTML
2. 当传递了一个string参数的时候，修改元素的innerHTML为参数值

$('p').html('123')     //修改p的值为123

$('p').html()           //可以得到p的innerHtml 123

.text()

和html方法类似，操作的是DOM的innerText值