以下 jQuery 方法有什么作用？如何使用？

1. .append()
2. .prepend()
3. .before()
4. .after()
5. .remove()
6. .empty()
7. .html()
8. .text()

作用

1. .append()
   可以一次添加多个内容，内容可以是DOM对象、HTML string、jQuery对象
$('body').append($('<p>nihao</>'))

   image

$('body').append('<h1>jqueryDOM</h1>')

image

$('body').append('nihao')

image

页面的变化

image

2. .prepend()
   向对象头部追加内容，用法和.append()类似，内容添加到最开始
   $('ul').prepend('<p>ul内容的前面</p>')

   image

$('li').eq(0).prepend('<p>ul内容的前面</p>')

image

页面变化

image

3. .before()
   在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和.append()类似
   $('ul').before('<p>ul的兄弟元素，并且出现在ul的前面')

   image

页面变化

image

4. .after()
   和.before()相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和.append()类似
   $('ul').after('<p>出现在ul的下面</p>')

   image

页面变化

image

5. .remove()
   删除被选元素（及其子元素）
   $('ul').remove()

   image

6. .empty()
   清空被选择元素内所有子元素

   image

   $('div').empty()

   image

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

• 当没有传递参数的时候，返回元素的innerHTML

• 当传递了一个string参数的时候，修改元素的innerHTML为参数值
  $('div').html()

  image
  image

  $('div').html('<p>.html()</p>')

  image
  image

8. .text()
   和html方法类似，操作的是DOM的innerText值
   原内容

   image

   $('div').text()

   image

   $('div').text('hello')

   image

   内容发生变化

   image