07-jQuery-DOM操作-属性操作-文档操作（CRUD操作）

1、append() 和 appendTo() 是 jQuery 中用于添加元素的方法，它们的作用是将指定的元素添加到其他元素内部的末尾。

具体来说，append() 方法是将参数中的内容追加插入到匹配元素的内部末尾位置，而 appendTo() 方法则是将匹配元素插入到参数中指定的元素内部末尾位置。

javascript">// append() 的语法
$(selector).append(content)

// appendTo() 的语法
$(content).appendTo(selector)

//其中，selector 表示需要被添加元素的目标元素选择器，而 content 则表示需要添加的元素内容。
//这个参数可以是一个 HTML 字符串、DOM 元素、jQuery 对象或者回调函数。

javascript"><ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

//使用 append() 方法添加一个新的 li 元素：
$('ul').append('<li>Orange</li>');

//运行之后，HTML 结构变成了：
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

//使用 appendTo() 方法将一个已有的 li 元素添加到另一个 ul 元素中：
$('<li>Peach</li>').appendTo('ul');

//这样，原本的 li 元素就从一个 ul 元素被移动到了另一个 ul 元素中，而 HTML 结构变成了：
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>
<ul>
  <li>Peach</li>
</ul>

2、prepend() 和 prependTo() 是 jQuery 中用于添加元素的方法，它们的作用是将指定的元素添加到其他元素内部的开头。

具体来说，prepend() 方法是将参数中的内容插入到匹配元素内部的开头位置，而 prependTo() 方法则是将匹配元素插入到参数中指定的元素内部开头位置。它们的语法如下：

javascript">
// prepend() 的语法
$(selector).prepend(content)

// prependTo() 的语法
$(content).prependTo(selector)

其中，selector 表示需要被添加元素的目标元素选择器，而 content 则表示需要添加的元素内容。
这个参数可以是一个 HTML 字符串、DOM 元素、jQuery 对象或者回调函数。

javascript"><ul>
  <li>Banana</li>
</ul>


使用 prepend() 方法添加一个新的 li 元素：
$('ul').prepend('<li>Apple</li>');


运行之后，HTML 结构变成了：
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>


使用 prependTo() 方法将一个已有的 li 元素添加到另一个 ul 元素中：
$('<li>Peach</li>').prependTo('ul');


这样，原本的 li 元素就从一个 ul 元素被移动到了另一个 ul 元素中，而 HTML 结构变成了：
<ul>
  <li>Peach</li>
  <li>Banana</li>
</ul>

3、before() 和 after() 是 jQuery 中用于插入元素的方法，它们的作用是在目标元素前面或后面插入新的元素。

具体来说，before() 方法是在目标元素之前插入参数中的内容，而 after() 方法则是在目标元素之后插入参数中的内容。它们的语法如下：

javascript">// before() 的语法
$(selector).before(content)

// after() 的语法
$(selector).after(content)
其中，selector 表示目标元素的选择器，而 content 则表示需要插入的元素内容。
这个参数可以是一个 HTML 字符串、DOM 元素、jQuery 对象或者回调函数。

javascript"><div class="box"></div>


使用 before() 方法添加一个新的 div 元素：
$('.box').before('<div class="new-box"></div>');


运行之后，HTML 结构变成了：
<div class="new-box"></div>
<div class="box"></div>


使用 after() 方法将一个已有的 div 元素添加到另一个 div 元素后面：
$('<div class="another-box"></div>').insertAfter('.box');


这样，原本的 div 元素就从一个 div 元素被移动到了另一个 div 元素后面，而 HTML 结构变成了：
<div class="box"></div>
<div class="another-box"></div>

4、remove() 和 empty() 是 jQuery 中用于操作元素的方法，它们可以移除指定元素或其子元素。

具体来说，remove() 方法是从 DOM 中彻底移除匹配的元素，而 empty() 方法则是移除目标元素内部所有的子元素（包括文本节点）。它们的语法如下：

javascript">// remove() 的语法
$(selector).remove()

// empty() 的语法
$(selector).empty()
其中，selector 表示需要被操作的目标元素选择器。

javascript"><ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Peach</li>
</ul>


使用 remove() 方法移除 ul 元素：
$('ul').remove();


运行之后，HTML 结构中就没有 ul 元素了。


使用 empty() 方法移除 ul 元素中的所有 li 子元素：
$('ul').empty();


这样，ul 元素中的所有 li 子元素都被移除了。

在实际开发中，remove() 和 empty() 方法都非常常用，可以方便地对文档结构进行修改和优化。值得注意的是，使用 remove() 方法移除的元素将无法恢复，而使用 empty() 方法仅移除子元素，目标元素本身仍然存在，只是内容被清空了。

jQuery 文档操作方法

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。