DOM中的M即model(節點)。通過對節點的操作，可以實現頁面元素的增、刪、複製以及替換。
操作頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>節點</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo8.js"></script>
</head>
<body>
<Strong>添加節點</Strong>
<div id="operate" class="operDom">節點操作</div>
<div>節點操作</div>
</body>
</html>一、創建節點
$(function(){
var box = $('<div id="box">創建節點</div>'); //創建節點
$('body').append(box); //將節點放到body中
})二、插入節點
內部插入
$(function(){ $('body').append('<div>添加節點</div>'); //向body內部添加節點 $('#operate').append(function(index, value){ //向div內部添加節點 return '<div>添加節點</div>' + value; }) $('Strong').appendTo($('#operate')); //將存在的元素節點，移動到指定位置 $('#operate').prepend('<div>添加節點</div>'); //向節點內部的前面，添加節點 $('#operate').prepend(function(index, value){ //向節點內部的前面，添加節點 return '<div>添加節點</div>' + value; }) $('Strong').prependTo($('#operate')); //將存在的節點，移動到指定位置 })外部插入
$(function(){ $('#operate').after('<div>同級操作</div>'); //同級節點，向後插入節點 $('#operate').after(function(index, value){ //同級節點，向後插入節點 return '<div>同級操作</div>' + value; }) $('#operate').before('<div>同級操作</div>'); //同級節點，向前插入節點 $('#operate').before(function(index, value){ //同級節點，向前插入節點 return '<div>同級操作</div>' + value; }) $('Strong').insertAfter($('#operate')); //將存在的節點，移動到指定位置 $('Strong').insertBefore($('#operate')); //將存在的節點，移動到指定位置 })
三、包裹節點
$(function(){
$('Strong').wrap('<div>包裹節點</div>'); //向指定節點，包裹節點
$('Strong').wrap($('#operate')); //用存在的節點，包裹節點
$('Strong').wrap(function(index){ //向指定節點，包裹節點
return '<div></div>';
})
$('Strong').wrap('<div><em></em></div>'); //包裹節點
$('Strong').unwrap(); //移除包裹，多層需移除多次。從裏向外移除
$('Strong').unwrap();
$('div').wrapAll('<div></div>'); //向所有的div，在最外面進行包裹
$('div').wrapAll($('Strong')); //向所有的div，利用已經存在的節點，子最外面包裹
$('#operate').wrapInner('<em></em>'); //向指定節點，內部子節點最外面，包裹
$('#operate').wrapInner($('Strong')); //向指定節點，內部子節點最外面，包裹
$('#operate').wrapInner(function(index,value){ //向指定節點，內部子節點最外面，包裹
return '<Strong></Strong>';
});
})四、節點操作
複製節點
$(function(){ $('body').append($('#operate').clone(true)); //克隆節點，事件也一併複製 $('body').append($('#operate').clone()); //克隆節點，事件也一併複製 $('.operDom').click(function(){ alert($(this).text()); }) })刪除節點
$(function(){ $('.operDom').remove(); //刪除節點 $('div').remove('.operDom'); //刪除節點，帶條件 $('body').append($('.operDom').detach()); //刪除節點 $('.operDom').remove().appendTo($('body')); //講師說，不保留，經測試保留 $('body').append($('.operDom').remove()); //講師說，不保留，經測試保留 })3.清除節點
$(function(){ $('.operDom').empty(); //清除節點，保留元素標籤 })4.替換節點
$(function(){ $('<div><em>替換節點</em></div>').replaceAll($('.operDom')); //替換節點 })