DOM事件

开发工具与关键技术：Visual Studio / 替换和移除
作者：郑名方
撰写时间：2019年5月3日

DOM替换 从DOM树中移除已有的内容并将其替换为新内容。
replaceAll() 用集合的匹配元素替换每个目标元素。一个选择器字符串，jQuery对象，DOM元素，或者元素数组，包含哪个元素被替换。replaceAll()和replaceWith()功能一样，但是目标和源相反。

replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。用来插入的内容，可能是HTML字符串，DOM元素，或者jQuery对象。一个函数，返回的内容会替换匹配的元素集合。replaceWith()可以从DOM中移除内容，然后在这个地方插入新的内容。用来替换的元素从旧位置移动到新的位置，而不是复制。 replaceWith()方法，和大部分jQuery其他方法一样，返回jQuery对象，所有可以和其他方法链接使用，但是需要注意的是:对于该方法而言，该对象指向已经从DOM中被移除的对象，而不是指向替换用的对象。

DOM移除detach()从DOM中去掉所有匹配的元素。一个选择表达将需要移除的元素从匹配的元素中过滤出来。.detach() 方法和.remove()一样, 除了.detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，

这种方法很有用Empty（）从DOM中移除集合中匹配元素的所有子节点。如果

里面包含任何数量的嵌套元素，他们也会被移走。为了避免内存泄漏，jQuery先移除子元素的数据和事件处理函数，然后移除子元素。如果你想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来），请使用.detach()代替 。

remove（）将匹配元素集合从DOM中删除。(注：同时移除元素上的事件及jQuery数据。)一个选择器表达式用来过滤将被移除的匹配元素集合。Remove() 和empty()相似。Remove()将元素移出DOM。当我们想将元素自身移除时我们用remove() ，同时也会移除元素内部的一切，包括绑定的事件及与该相关的jQuery数据。要删除的元素不删除数据和事件的情况下，使用detach()来代替。如果

元素里面有子元素，他们同样会被移除。还有元素上的事件及jQuery数据也会被删除。我们也可以添加一个可选的选择器参数来过滤匹配的元素。前面代码可以重写，结果一样。从DOM中移除所有含有“Hello”的段落。也可以使用$(“p”).filter(“:contains(“Hello”)”.remove()可以达到同样的结果。
Example: 从 DOM 中移除所有含有 “Hello” 的段落。也可以使用 $(“p”).filter(":contains(‘Hello’)").remove() 达到相同的目的。如果

元素里面有子元素，他们同样会被移除。还有元素上的事件及 jQuery 数据也会被删除。我们也可以添加一个可选的选择器参数来过滤匹配的元素。例如，前面的代码可以重写为：

Unwrap（）将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。.unwrap()删除元素的父级元素。和 .wrap()的功能相反。匹配的元素（以及他们的兄弟元素，如果有的话）取代他们的父母在DOM结构。