一、创建节点
var box = $('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部
二、插入节点
2.1 内部插入节点(即新节点作为指定节点的子节点)
$('div').append('<strong>新节点</strong>');//将新节点strong作为div的子节点插入到最后
$('div').append(function(){ return '<strong>新节点</strong>';});//作用同上
$('span').appendTo('div'); //讲 已经存在的span 节点移入 div 节点内,作为其子节点放在最后
$('span').appendTo($('div')); //同上
$('div').prepend('<span>节点</span>'); //将 span 插入到 div 内部的前面
$('div').append(function (index, html) { //使用匿名函数,同上
return '<span>节点</span>';
});
$('span').prependTo('div'); //将 span 移入 div 内部的前面
$('span').prependTo($('div')); //同上
2.2 外部插入节点(即新插入元素节点和参考节点属于同一级)
$('div').after('<span>新节点'</span>');//在div的同级节点后面插入span
$('div').after(function(){ return '<span>新节点'</span>');}
$('div').before('<span>节点</span>'); //向 div 的同级节点前面插入 span
$('div').before(function (index, html) { //使用匿名函数,同上
return '<span>节点</span>';
});
$('span').insertAfter('div'); //将 span 元素移到 div 元素外部的后面
$('span').insertBefore('div'); //将 span 元素移到 div 元素外部的前面
三、包裹节点(使用字符串代码将指定元素的代码包含着)
$('div').wrap('<strong></strong>');//在div外层包裹一层strong
$('div').wrap(function(){ return '<strong></strong>');});
$('div').wrap('<strong>可以带内容</strong>');//可以带内容
$('div').wrap('<strong><em></em></strong>');//可以包裹多层
$('div').wrap($('strong').get(0));//可以包裹一个已经存在的原生DOM
$('div').wrap(document.createElement('strong'));//可以包裹一个临时创建的原生DOM
$('div').unwrap();//移除一层包裹,多个需移除多次
$('div').wrapAll('<strong></strong>');//在所有div外面只包裹一层strong
$('div').wrapInner('<strong></strong>');//将div的html内容用strong进行包裹
.wrap()和.wrapAll()的差别:
如果html代码如下:
<body>
<div>
<li>li-1</li>
<li title='mytitle' id='myid'>li-2</li>
<li>li-3</li>
<li>li-4</li>
</div>
<div><b>div1</b></div>
<div>
<li>li-11</li>
<li>li-12</li>
<p>paragraph</p>
<li>li-13</li>
<li>li-14</li>
</div>
<div>
<li>li-21</li>
</div>
</body>
使用jQuery代码: $('li').wrapAll(document.createElement('strong'));
html代码变成以下代码:(html的顺序被修改,所有li节点被汇聚到一个div中,然后用一个strong将所有li都包含起来)
<body><div><strong><li>li-1</li><li id="myid" title="mytitle">li-2</li><li>li-3</li><li>li-4</li><li>li-11</li><li>li-12</li><li>li-13</li><li>li-14</li><li>li-21</li></strong></div><div><b>div1</b></div><div><p>paragraph</p></div><div></div></body>
而使用$('li').wrap(document.createElement('strong'));
html代码变成如下:(此时html代码顺序没有变化,只是在每个li节点外包裹了一个strong节点)
<body>
<div>
<strong>
<li>li-1</li>
</strong>
<strong>
<li id="myid" title="mytitle">li-2</li>
</strong>
<strong>
<li>li-3</li>
</strong>
<strong>
<li>li-4</li>
</strong>
</div>
<div>
<b>div1</b>
</div>
<div>
<strong>
<li>li-11</li>
</strong>
<strong>
<li>li-12</li>
</strong>
<p>paragraph</p>
<strong>
<li>li-13</li>
</strong>
<strong>
<li>li-14</li>
</strong>
</div>
<div>
<strong>
<li>li-21</li>
</strong>
</div>
</body>
四、节点操作
4.1 复制节点
$('div').clone(true);//复制一个div节点,true参数表示复制节点时,不仅复制元素和内容,同时复制事件行为,如果没有参数表示不复制事件行为。
$('div').remove();//直接删除div元素,可以携带selector参数,表示删除具有selector的div。
$('div').detach();//删除节点,但保留节点的事件
注:remove()和detach()都是删除节点,该方法本身可以返回当前被删除的节点对象,但区别在于前者节点对象保留事件行为,后者则保留。
$('div').empty();//删除节点里的内容
$('div').replaceWith('<span>DOM</span>');//将div替换成span元素
$('<span>DOM</span>').replaceAll('div');//同上
注意:节点被替换后,所包含的事件行为就全部消失了。