添加节点相关方法
在元素内部添加
-
append()方法和appendTo方法
-
语法不同:
-
$('ul').append($li);
-
$li.appendTo('ul');
-
-
效果相同:都是在指定元素内部的最后一个元素之后添加元素。
-
-
prepend()方法和prependTo()方法
-
语法不同:
-
$('ul').prepend($li);
-
$li.prependTo('ul');
-
-
效果相同:都是在都是在指定元素内部的第一个元素之前添加元素。
-
在元素外部添加
-
after()方法和insertBefore()方法
-
语法不同:
-
$('ul').after($li);
-
$li.insertBefore('ul');
-
-
效果相同:都是在指定元素外部的后面添加新节点。
-
-
before()方法和insertAfter()方法
-
语法不同:
-
$('ul').before($li);
-
$li.insertAfter('ul');
-
-
效果相同:都是在指定元素外部的前面添加新节点。
-
删除节点相关方法
- $.remove(),移除指定元素
- $.empty(),清空指定元素的内容和子元素
- $.detach(),移除指定元素,效果和remove()方法一样
替换节点相关方法
-
. r e p l a c e W i t h ( ) 和 .replaceWith()和 .replaceWith()和.replaceAll()
-
//1.创建一个h6标题元素 var $h6 = $('<h6>我是标题6</h6>') //2.将页面中的h2标题替换为h6标题元素 $('h2').replaceWith($h6) //3.将页面中h2标题为h6 $h6.replaceAll('h2')
-
复制节点相关方法
-
$.clone()方法
-
参数:true或false,true表示深复制,false表示浅复制,不填写默认为浅复制。
-
//给第一个li注册事件 $('ul>li:first').click(function(){ alert("这是第一个li的单击事件") }) //注册浅复制和深复制按钮的单击事件 $('.first').click(function(){ //浅复制一个节点到$li var $li= $('ul>li:first').clone() //将复制的节点添加到ul中来 $('ul').append($li) }) $('.second').click(function(){ //浅复制一个节点到$li var $li= $('ul>li:first').clone(true) //将复制的节点添加到ul中来 $('ul').append($li) })
-