创建节点
var $li_1 = $("<li>这是创建的第一个节点</li>");
var $li_2 = $("<li>这是创建的第二个节点</li>");
$('ul').append($li_1).append($li_2);
创建属性节点
var $li_1 = $("<li title='香蕉'>香蕉</li>");
var $li_2 = $("<li title='雪梨'>雪梨</li>");
$('ul').append($li_1).append($li_2);
插入节点
| 方法 | 位置 | 示例 |
|---|---|---|
| append() | 添加到匹配内容后面（内部） | 内部添加$("ul").append("<li></li>"); |
| appendTo() | 添加到 | 内部添加$("<li></li>").append("ul"); |
| prepend() | 添加到匹配内容前面（内部） | |
| prependTo() | 添加到 | |
| after() | 添加到匹配内容后面（外部） | |
| insertAfter() | 添加到 | |
| before() | 添加到匹配内容前面（外部） | |
| insertBefore() | 添加到匹配内容前面（外部） |
删除节点
remove()
该节点包含的所有后代节点都会被删除 返回被已删除的节点
var $li_1 = $('li:eq(0)').remove();
$($li_1).appendTo($('ul')); //被返回的节点可用appenTo()方法再插入
//appenTo()可以用来移动元素，以上两部可以用appenTo() 先删除再添加
$('li:eq(0)').appendTo($('ul'));
可以通过传递参数来删除制定节点
$("ul li").remove("li[ title!=菠萝 ]")
detach()
与remove()不同的是所有的jq对象和事件都会被保留 重新添加时候事件还在
empty()
清空节点 清空元素中的所有后代节点和内容
克隆节点
clone(true)
参数true表示克隆节点的时候可以同时复制该元素绑定的事件
替换节点
replaceWith() replaceAll()
$('li:eq(0)').replaceWith('<li>苹果</li>');//用苹果替换原来的香蕉
$('<li>苹果</li>').replaceAll('li:eq(0)');//用苹果替换原来的香蕉
包裹节点
| 方法 | 位置 | 示例 |
|---|---|---|
| wrap() | $("strong").wrap('<b></b>') | 用<b>包裹<strong> 每个单独包裹; |
| wrapAll() | $("strong").wrapAll('<b></b>') | 用一个<b>包裹所有<strong> 如果中间有间隔元素 间隔元素会被放到包裹元素之后; |
| wrapInner() | $("strong").wrapInner('<b></b>') | 用<b>包裹<strong>内部的内容 每个单独包裹; |
