以下 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</>'))
   向body中添加nihao

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

image

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

直接插入字符串
页面的变化
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()
   

   ul元素被删除

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

   原内容
   $('div').empty()
   image

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

• 当没有传递参数的时候，返回元素的innerHTML
• 当传递了一个string参数的时候，修改元素的innerHTML为参数值
  $('div').html()
  内容为空的div
  返回innerHTML
  $('div').html('<p>.html()</p>')
  image
  image

8. .text()
   和html方法类似，操作的是DOM的innerText值
   原内容
   image
   $('div').text()
   image
   $('div').text('hello')
   image
   内容发生变化
   nihao被替换成了hello