一、为元素节点添加子节点:
(1) appendChild():
var reference = element.appendChild(new Child);
给定子节点newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
二、节点的替换:
(1)replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
(2)该节点除了替换功能以外还有移动的功能。
(3)该方法只能完成单向替换,若需要使用双向替换,需要自定义函数。
window.onload = function(){
//自定义互换两个节点的函数
function replaceEach(aNode, bNode){
//1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
var aParent = aNode.parentNode;
var bParent = bNode.parentNode;
if(aParent && bParent){
//2. 克隆 aNode 或 bNode
var aNode2 = aNode.cloneNode(true);
//克隆 aNode 的同时, 把 onclick 事件也复制.
aNode2.onclick = aNode.onclick;
//克隆 aNode 的同时, 把 onclick 事件也复制.
aNode2.index = aNode.index;
//3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
//方法实现节点的互换
bParent.replaceChild(aNode2, bNode);
aParent.replaceChild(bNode, aNode);
}
}
//1. 获取所有的 li 节点
var liNodes = document.getElementsByTagName("li");
//2. 为每一个 li 节点添加 Onclick 响应函数
for(var i = 0; i < liNodes.length; i++){
//手动为每个 li 节点添加一个 index 属性
liNodes[i].index = i;
liNodes[i].onclick = function(){
//alert("index: " + this.index);
//3. 找到和当前节点对应的那个 li 节点
var targetIndex = 0;
if(this.index < 4){
targetIndex = 4 + this.index;
}else{
targetIndex = this.index - 4;
}
//交换 index 属性.
var tempIndex = this.index;
this.index = liNodes[targetIndex].index;
liNodes[targetIndex].index = tempIndex;
//4. 互换.
replaceEach(this, liNodes[targetIndex]);
}
}