目錄
1、創建節點
（1）創建元素
JavcaScript創建元素的方法通過document.createElement("tagName")方法實現，若要把創建的元素添加到文檔中，還要調用appendChild()方法實現。
window.οnlοad=function(){ //頁面初始化函數
var div=document.createElement("div");//創建div元素
document.body.appendChild(div);//把創建的div元素添加到DOM文檔樹中
}
jquery使用構造函數$()創建元素對象，然後使用append()方法將創建的元素添加到文檔中。
$(function(){ //頁面初始化函數
var $div=$("<div></div>");//創建div對象
$("body").append($div);//把創建的div對象添加到文檔中
})
（2）創建文本
JavcaScript創建文本節點的方法通過document.createTextNode(data)方法實現，若要把創建的元素添加到文檔中，還要調用appendChild()方法實現。
jquery創建文本節點直接把文字字符串添加到元素標記字符串中，然後用append()等方法把它們添加到DOM文檔中。
應用舉例：JavcaScript實現創建元素節點和文本
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.οnlοad=function()
{
var div=document.createElement("div");//創建div元素
var txt=document.createTextNode("DOM");//創建文本節點
div.appendChild(txt);//將文本節點添加到元素節點
document.body.appendChild(div);//將元素節點添加到DOM文檔
};
</script>
</head>
<body>
</body>
jquery實現創建元素節點和文本:
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函數
var $div=$("<div>DOM</div>");//創建元素節點，同時插入文本
$("body").append($div);//將元素節點插入到DOM文檔中
}
)
</script>
</head>
<body>
</body>
（3）創建屬性
JavaScript實現需要單獨爲元素設置屬性，而jQuery能夠直接把元素、文本和屬性混在一起以HTML字符串的形式進行傳遞。
應用舉例：
JavaScript方式：
<script type="text/javascript">
window.οnlοad=function()
{
var div=document.createElement("div");//創建div元素
var txt=document.createTextNode("DOM");//創建文本節點
div.appendChild(txt);//將文本節點添加到元素節點
document.body.appendChild(div);//將元素節點添加到DOM文檔
div.style.color="red";//設置div屬性
};
</script>
jquery實現方式：
<script type="text/javascript">
$(
function(){ //界面始化函數
var $div=$("<div style='color:#F00'>DOM</div>");//創建元素節點，同時插入文本 注意屬性裏面用單引號
$("body").append($div);//將元素節點插入到DOM文檔中
}
)
</script>
2、插入節點-內部插入
（1）JavaScript方式：使用appendChild()和insertBefore()在元素內插入節點內容。
將指定元素插入到節點的尾部。
nodeObject.appendChild(newchild)
nodeObject爲節點對象，newchild表示要插入的子節點。
將指定元素插入到節點前面。
insertBefore(newchild,refchild)
（2）jquery定義了4個方法
1）append()用法
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函數
$(".test").append('<p>參數四</p>');//append（）方法把參數指定的內容插入到最後面
}
)
</script>
</head>
<body>
<div class="test">
<p>參數一</p>
<p>參數二</p>
<p>參數三</p>
</div>
</body>
2）appendTo()用法將匹配的元素插入到目標元素的最後面。
<script type="text/javascript">
$(
function(){ //界面始化函數
$('<p>參數四</p>').appendTo(".test");
}
)
</script>
3）prepend()方法將參數指定的內容插入到指定節點最前面。
<script type="text/javascript">
$(
function(){ //界面始化函數
$(".test").prepend('<p>參數四</p>');
}
)
</script>
3、插入節點-外部插入
（1）after()
該方法能夠根據設置參數在每一個匹配的元素後面插入內容。
after(content)
content表示一個元素、HTML字符串或jquery對象。
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函數
$("li img").after($("li img").attr("src"));//獲取每個圖片的src值，並追加到元素之後
}
)
</script>
<style>
li{float: left;}
li img{height: 200px}
</style>
</head>
<body>
<ul class="mytest">
<li><img src="image/表情.jpg"</li>
<li><img src="image/小兔子.jpg"</li>
</ul>
</body>
（2）insertAfter()
該方法與after()方法功能相同，用法相反。
（3）before（）該方法爲每個匹配的元素之前插入內容。
4、刪除節點
（1）JavaScript方式：使用removeChild()方法刪除指定的節點及其所包含的所有子節點。
（2）jquery
5、操作屬性
（1）設置屬性
JavaScript方式：使用setAttibute()方法設置屬性
elementNode.setAttribute(name,value)
elementNode表示元素節點，name表示設置的屬性名，value表示要設置的屬性值。
jquery方式
1）prop()
該方法能夠爲匹配的元素設置一個或更多屬性。
prop(propertyName,value)
應用舉例：設置checked屬性
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函數
$("input[checked='checked']").prop({disable:true});
}
)
</script>
</head>
<body>
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox">
</body>
（2）訪問屬性
JavaScript方式：使用getAttibute()方法訪問屬性。
elementNode.getAttribute(name)
elementNode表示元節點對象，name表示屬性的名稱。
jquery方式：prop()方法
prop(propertyName)
propertyName爲要讀取的屬性名稱。
（3）刪除屬性
JavaScript方式：使用removeAttribute()方法刪除指定屬性。
elementNode.removeAttribute(name)
jquery方式：removeProp()方法刪除prop（）方法設置的屬性
removeProp(propertyName)