jQuery 修改 DOM 文档

增加

对于文档内部的增加

• 直接对内部元素追加末尾
  • append()
    • 向每个匹配的元素内部追加内容
    • $("p").append("<b>Hello</b>");
  • appendTo()
    • 把某个元素匹配指定的元素追加到某个集合中，To 指向的就是集合
    • $("p").appendTo("div"); 把 p 加到 div 中
• 直接对元素内部的首位添加
  • prepend()
    • 向每个匹配的元素内部添加前置内容。
    • $("p").prepend("<b>Hello</b>");
  • prependTo()
    • 和 appendTo() 类似
    • 把所有匹配的元素添加到另一个、指定的元素元素集合前置中。
    • $("p").prependTo("#foo");

对某个指定元素的增加

• 添加到指定元素之后
  • after()
    • 在每个指定的元素之后插入内容。
    • $("p").after("<b>Hello</b>");
  • insertAfter()
    • 和 appendTo() 类似，意思倒转
• 添加到指定元素之前
  • before()
    • 在每个指定的元素之前插入内容。
    • $("p").before("<b>Hello</b>");
  • insertBefore()
    • 和 appendTo() 类似，before() 意思倒转

包裹

• wrap()
  • 把所有匹配的元素用其他元素的结构化标记包裹起来。，对于多个匹配的元素都单独包裹一个
  • $("p").wrap("<div class='wrap'></div>");
• wrapAll()
  • 将所有匹配的元素用一个元素包裹起来
  • $("p").wrapAll("<div></div>");
• wrapInner()
  • 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
  • $("p").wrapInner("<b></b>");
• unwrap()
  • 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。
  • $("p").unwrap()

代替

• replaceWith()
  • 将所有匹配的元素替换成指定的HTML或DOM元素。
  • 他是移动到目标位置来替换，而不是复制一份来替换。
  • $("p").replaceWith("<b>Paragraph. </b>");
• replaceAll()
  • 用匹配的元素替换掉所有 selector匹配到的元素。
  • 和 appendTo 意思相近，replaceWith 倒转意思。

删除

• empty()
  • 删除匹配的元素集合中所有的子节点。
  • $("p").empty();
• remove()
  • 从DOM中删除所有匹配的元素。（本身，绑定的事件，附加数据异常被删除）
  • $("p").remove();
• detach()
  • 从DOM中删除所有匹配的元素。绑定的事件，附加数据异常不会被删除
  • $("p").remove();

其他

• clone()
  • 克隆匹配的DOM元素并且选中这些克隆的副本。
  • 参数有 true 和 false，指示事件处理函数是否会被复制
  • true 是复制
  • $("b").clone().prependTo("p");