jQuery之DOM操作

A、创建元素

只需要把DOM字符串传入 $ 方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>');

image.png

B、添加元素

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

• 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
• 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值

image.png

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

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

image.png

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

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

image.png

(4) .after([content][,content]) / .after(function（index）)

和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似

image.png

C、删除元素

(1) remove([selector])

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

image.png

(2) empty()

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

image.png

D、包裹元素

(1) html([string])
这是一个读写两用的方法，用于获取/修改元素的innerHTML

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

image.png

其中，特别注意：读写两用的方法很多，原理都类似

• 如果结果是多个进行赋值操作的时候会给每个结果都赋值

• 如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值

image.png

(2) text()
和html方法类似，操作的是DOM的innerText值

image.png