jQuery DOM操作

创建节点

• 无论$(html)中的HTML代码多么复杂，都可以通过相同的方式来创建。

var $html = $("
这是一个复杂的组合
");
$("ul").append($html);

方法	示例	说明
append()		向匹配的元素内追加内容
appendTo()		append()的反向实现
prepand()		向匹配的元素内部前置内容
prependTo()		prepand()的反向实现
after()		在匹配的元素之后插入内容
insertAfter()		after()的反向操作
before()		在匹配的元素之前插入内容
insertBefore()		before()的反向操作

删除节点

• remove()

var $li = $("ul li:eq(1)").remove();
$li.appendTo("ul");

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除
被remove()之后还能正常使用

• detach()
  只是从原来的位置删除了，并不从jQuery对象中删除，所有绑定的事件、附加的数据都会被保留下来。
• empty()

$("ul li:eq(1)").empty();

清空节点元素中的所有后代节点。

复制节点

$(this).clone(true).appendTo("body");

clone()方法中传递一个参数true，复制元素的同时，复制元素中所绑定的事件。

替换节点

你最喜欢的水果是？

//1、
$("p").replaceWith("你最不喜欢的水果是？");
//2、
$("你最不喜欢的水果是？").replaceAll("p");

包裹节点

• wrap()
  用标签把的元素包裹起来

$("strong").wrap("");

• wrapAll()
  当通过选择器选择到的strong有多个时，wrap()为他们分别加标签
  使用wrapAll()后是一同打标签

1
2

• wrapInner()
  通过选择器选中的标签的内部内容被打上了一层标签

$("strong").wrapInner("");

1