创建节点
a . 用 $() 创建节点
示例
1 <script> 2 var p = $(‘<p>创建节点</p>‘); //p元素节点 3 </script>
插入节点
A . 内部插入
a . append() 向每个匹配元素的尾部插入节点
b . appendTo() 与上一个相同
c . prepend() 向每个匹配元素的头部插入节点
d . prependTo() 与上一个相同
B . 外部插入
a . after() 向每个匹配元素的后面插入节点
b . before() 向每个匹配元素的前面插入节点
包裹节点
a . wrap() 将所有匹配元素单独包裹
示例
$(‘p‘).wrap(‘<div></div>‘); //将所有P标签用div标签包裹
b . wrapAll() 将多个匹配元素用一个元素包裹
//HTML代码
<p>1</p> <p>2</p> <p>3</p> <script> $(‘p‘).wrapAll(‘<div></div>‘); //将所有匹配的p标签用一个div包裹 </script> 结果 : <div> <p>1</p> <p>2</p> <p>3</p> </div>
c . wrapInner() 将所有匹配的元素的子内容用其他标签包裹
<script> $(‘p‘).wrapInner(‘<div></div>‘); </script>
删除节点
a . remove() 删除节点
$(‘p‘).remove(); //删除所有p标签
b . empty() 清空节点的所有子节点
$(‘p‘).empty(); //删除所有p标签的内容
c . detach() 删除节点,与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
复制节点
a . clone(bool) 克隆节点,参数默认是false,如果是true 则事件也会被复制.
$("b").clone().prependTo("p"); //将b标签克隆并追加到p标签里
替换节点
a . replaceWith()
//将p标签替换成div标签,内容保留 $(‘p‘).replaceWith(function(){ return ‘<div>‘ + $(this).text() + ‘</div>‘; }); //将p标签替换成b标签,内容不保留 $(‘p‘).replaceWith(‘<b>替换了</b>‘);
节点属性
a . attr(key,value) 设置或返回被选元素的属性值
b . removeAttr(key) 从每一个匹配的元素中删除一个属性