二、元素操作

2.1 创建元素document.createElement(type)

使用方式：

• document.createElement(type)

  • type:元素类型（标签名字符串）

  • 返回值：创建出来的元素

// 创建元素
// 我们可以使用DOM提供相应的API，来创建元素
var p = document.createElement("p");
console.log(p);

孤儿节点，不在DOM树上

2.2 上树father.appendChild(child)

使用方式：

• father.appendChild(child)

  • child：要追加的子节点

  • father：父节点

  • 返回值：child

  • 最终效果：将child追加到father中，作为father的childNodes中的最后一个子元素

结构：

<div id="box"></div>

执行代码：

// 创建元素
//创建元素
var p = document.createElement("p");
// 获取box
var box =document.getElementById("box");
// 将创建出来的p元素追加到box中
box.appendChild(p);

结果：

2.3 下树father.removeChild(child)

使用方式：

• father.removeChild(child)

  • child：要移除的子节点

  • father：父节点

  • 返回值：child

  • 最终效果：child从father的子节点中移除

// 点击btn让p元素下树
// 获取btn
var btn = document.getElementById("btn");
btn.onclick = function(){
    box.removeChild(p);
}

2.4 插入father.insertBefore(newChild,oldChild)

• father.insertBefore(newChild,oldChild)

  • newChild：要插入的元素

  • oldChild：参照元素（oldChild为null时，效果等价于appendChild方法）

  • 返回值：newChild

  • 最终效果：newChild插入到oldChild前面，作为它的兄弟节点存在

// 创建元素
var li = document.createElement("li");
// 添加内部文本
li.innerHTML = 11;
// 获取ul
var ul = document.getElementById("list");

// 通过ul调用insertBefore方法
ul.insertBefore(li, null);  // 第二个参数可以接受null，效果等价于appendChild方法

// 获取ul的所有子节点
var arr = ChildNodes(ul);
console.log(arr);
ul.insertBefore(li,arr[5]);  // 第一个参数是要插入的元素，第二个参数是参照元素，就是你要将li插入到哪个元素的前面去

2.5 替换father.replaceChild(newChild,oldChild)

使用方式：

• father.replaceChild(newChild,oldChild)

  • newChild：要替换上的元素

  • oldChild：被替换下的元素

  • 返回值：oldChild

  • 最终效果：newChild替换掉oldChild

// 创建元素
var li = document.createElement("li");
// 添加内部文本
li.innerHTML = 11;

// 获取所有的li
var lis = document.getElementsByTagName("li");
// 获取ul
var ul = document.getElementById("list");

// 将创建出来的li元素，在3s后替换掉lis中的某一项
setTimeout(function(){
    // ul.replaceChild(li,lis[2]);
    var child = ul.replaceChild(li,lis[2]);
    console.log(child);  // <li>3</li>
},3000);

2.6 克隆node.cloneNode(boolean)

使用方式：

• node.cloneNode(boolean)

  • 接受一个参数就是布尔值：

    • 默认是false，只复制自身

    • 当传递true的时候，则连同子节点一同复制

• 不传递参数，默认false，只复制自身：

// 获取ul
var ul = document.getElementsByTagName("ul")[0];
// 克隆ul
var newUl = ul.cloneNode();
console.log(newUl);

只复制自身，孤儿节点：

• 传递true，连同子节点一同复制：

// 获取ul
var ul = document.getElementsByTagName("ul")[0];
// 传递true
var newUl = ul.cloneNode(true);
console.log(newUl);

连同子节点一同复制，但仍是孤儿节点：

• 上树：

// 上树
document.body.appendChild(newUl);

追加到body中的最后一个字节点：