JavaScript学习笔记（5）：DOM增加节点的操作

JavaScript学习笔记（5）

DOM增加节点的操作

前言

上一次讲了DOM查询节点的操作，这一次来看看增加节点的操作。

首先需要创建节点

document.createElement(“element”）

创建一个元素节点

var p = document.createElement("p");
console.log(p)//<p></p>

document.createTextNode(“Text”)

创建一个文本节点

var para = document.createTextNode("Hello World");
console.log(para);//"Hello World"

添加节点

document.appendChild()

使一个节点成为另一个节点的子节点

var p = document.createElement("p");
var para = document.createTextNode("Hello World");
p.appendChild(para);
console.log(p);//<p>Hello World</p>

element.innerHTML = “innerHTML”

增加元素的子节点

var p = document.createElement("p");
p.innerHTML = "<div></div>";
console.log(p);//<p><div></div></p>

element.attribute = “new value”

若要添加属性节点，可以直接通过"."操作符进行添加

var p = document.createElement("p");
var para = document.createTextNode("Hello World");
p.style.color = "red";
p.appendChild(para);
console.log(p);//<p style="color: red;">Hello World</p>

element.setAttribute(“attribute”,“value”)

或者用这个方法也可以添加属性

var div = document.getElementsByTagName("div")[0];
div.setAttribute("id","123");
console.log(div.id);//123

后记

以上就是添加节点的方法，感觉上应该是有很多遗漏的，一时半会也想不起来了，但是三类节点的增加都已经实现了，应该可以解决所有增加节点的问题了。下一篇继续，更新节点，冲冲冲！！！