jQuery 删除、复制和替换元素

一、使用jQuery删除元素

（1）、remove()移除所有匹配的元素

  remove() 方法移除被选元素，包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

  但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

       语法：$(selector).remove()

This is some text in the div.
This is a paragraph in the div.
This is another paragraph in the div.



删除 div 元素

查看返回的对象：返回删除所有的元素

This is some text in the div.
This is a paragraph in the div.
This is another paragraph in the div.



删除 div 元素

  remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有

元素：

This is a paragraph in the div.
This is another paragraph in the div.
This is another paragraph in the div.
删除 class="italic" 的所有 p 元素

（2）、empty()删除匹配的元素集合中所有的子节点

  empty() 方法从被选元素移除所有内容，包括所有文本和子节点。

         语法：$(selector).empty()

This is a paragraph. Bold and italic text.
删除 p 元素的内容

查看返回的对象：返回的对象不包括删除的子元素，只保留节点。

This is a paragraph. Bold and italic text.
删除 p 元素的内容

（3）、detach() 从 DOM 中移除匹配元素集合

  detach() 方法移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

          语法：$(selector).detach()

在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。
移动 p 元素

 

二、使用jQuery复制元素

  clone() 方法生成被选元素的副本，包含子节点、文本和属性。

        语法：$(selector).clone(includeEvents)

  includeEvents可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

点击本段落可以增加文本的大小。事件处理器同样被复制到新的段落。
复制每个 p 元素，然后追加到 body 元素

 

三、使用jQuery替换元素

（1）、replaceAll()用匹配的元素替换所有匹配到的元素

   replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。提示：replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。

           语法：$(content).replaceAll(selector)

   content 必需。规定替换被选元素的内容。可能的值:

       HTML 代码 - 比如 ("

")

       新元素 - 比如 (document.createElement("div"))

       已存在的元素 - 比如 ($(".div1")) ，已存在的元素不会被移动，只会被复制，并包裹被选元素。

   selector 必需。规定要替换的元素。

This is a paragraph.
This is another paragraph.
用新的 div 替换所有段落

 

（2）、replaceWith()用新内容替换匹配的元素

   replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。提示：replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。

         语法：$(selector).replaceWith(content)

   content 必需。规定替换被选元素的内容。可能的值:

       HTML 代码 - 比如 ("

")

       新元素 - 比如 (document.createElement("div"))

       已存在的元素 - 比如 ($(".div1"))，已存在的元素不会被移动，只会被复制，并包裹被选元素。

    selector必需。规定要替换的元素。

This is a paragraph.
This is another paragraph.
用粗体文本替换所有段落

 

  使用函数来替换元素，使用函数把被选元素替换为新内容。

      语法：$(selector).replaceWith(function())

  function()必需。返回待替换被选元素的新内容的函数。

这是一个段落。
这是另一个段落。
用新的 p 元素替换所有段落