javascript學習筆記(十九) 節點的操作實現代碼
2024-05-06 14:21:41
供稿：網友
本節要用到的html例子
代碼如下:
<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
1.創建元素節點
document.createElement() 方法 用于創建元素，接受一個參數，即要創建元素的標簽名，返回創建的元素節點
代碼如下:
var div = document.createElement("div"); //創建一個div元素
div.id = "myDiv"; //設置div的id
div.className = "box"; //設置div的class
創建元素后還要把元素添加到文檔樹中
2.添加元素節點
appendChild() 方法 用于向childNodes列表的末尾添加一個節點，返回要添加的元素節點
代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //創建li
li.innerHTML = "項目四"; //向li內添加文本
ul.appendChild(li); //把li 添加到ul子節點的末尾
添加后:
代碼如下:
<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
<li>項目四</li>
</ul>
appendChild() 方法還可以添加已經存在的元素，會將元素從原來的位置移到新的位置
代碼如下:
var ul = document.getElementById("myList"); //獲得ul
ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾
運行后(IE)：
代碼如下:
<ul id="myList">
<li>項目二</li>
<li>項目三</li>
<li>項目一</li>
</ul>
insertBefore() 方法 ，如果不是在末尾插入節點，而是想放在特定的位置上，用這個方法，該方法接受2個參數，第一個是要插入的節點，第二個是參照節點，返回要添加的元素節點
代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //創建li
li.innerHTML= "項目四"; //向li內添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一個子節點前
添加后:
代碼如下:
<ul id="myList">
<li>項目四</li>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //創建li
li.innerHTML= "項目四"; //向li內添加文本
ul.insertBefore(li,ul.null); //把li添加到ul的子節點末尾
添加后:
代碼如下:
<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
<li>項目四</li>
</ul>
代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //創建li
li.innerHTML= "項目四"; //向li內添加文本
