创建节点
- 无论$(html)中的HTML代码多么复杂，都可以通过相同的方式来创建。
var $html = $("<li><em>这是</em><b>一个</b><a href="#">复杂的组合</a></li>");
$("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，复制元素的同时，复制元素中所绑定的事件。
替换节点
<p title="请选择你最喜欢的水果">你最喜欢的水果是？</p>
//1、
$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");
//2、
$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");
包裹节点
- wrap()
用<b>标签把<strong>的元素包裹起来
$("strong").wrap("<b></b>");
- wrapAll()
当通过选择器选择到的strong有多个时，wrap()为他们分别加<b>标签
使用wrapAll()后是一同打标签
<b>
<strong>1</strong>
<strong>2</strong>
</b>
- wrapInner()
通过选择器选中的标签的内部内容被打上了一层标签
$("strong").wrapInner("<b></b>");
<strong><b>1</b></strong>
