对于元素节点，我们是用createElement()来创建一个元素节点。对于文本节点，可以使用creatTextNode()来创建文本节点。然后将其组装成我们看到的有文本内容的元素。
这种创建的元素被称为动态Dom。相比于静态Dom,动态Dom实际上一开始是不存在的。
1.创建一个简单的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
function func() {
var oDiv = document.getElementById("content");
var oStrong = document.createElement("strong");
var oTxt = document.createTextNode("博客园学习");
// 将文本节点插入strong元素
oStrong.appendChild(oTxt);
// 将strong元素插入div元素
oDiv.appendChild(oStrong);
}
func()
</script>
</html>
2.创建复杂的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function func() {
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
}
func()
</script>
</html>
3.动态地创建图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function func() {
var oImg = document.createElement("img");
// 注意这里不是class而是className,因为class是保留字
oImg.className = "pic";
oImg.src = "img/example.jpg";
oImg.style.border = "1px solid sliver";
document.body.appendChild(oImg);
}
func()
</script>
</html>
把文本节点插入元素节点和组装好的元素插入到已有的元素中都是appendChild()。
4.实现一个动态地插入元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="txt" type="text"/><input id="btn" type="button" value="输入"/>
</body>
<script>
function func() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oUl = document.getElementById("list");
var oTxt = document.getElementById("txt");
// 将文本框的内容转化为文本节点
var textNode = document.createTextNode(oTxt.value);
var oli = document.createElement("li");
oli.appendChild(textNode);
oUl.appendChild(oli);
}
}
func()
</script>
</html>
效果如图：
输入Vue.js
insertBefore()将一个新的元素插入到父元素中的某一个子元素之前。（比如说第一个）
A.insertBofore(B, A.firstElementChild);
5.removeChild()删除元素。
A表示父元素，B表示父元素的某个子元素。
A.removeChild(B)
删除最后一个元素：
A.removeChild(A.lastElementChild)
删除整个列表：
document.body.removeChild(A）;
完整的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="btn" type="button" value="删除"/>
</body>
<script>
function func() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oUl = document.getElementById("list");
document.body.removeChild(oUl);
}
}
func()
</script>
</html>
6 A.cloneNode(bool)复制元素：
bool是布尔值，1或true表示复制元素本身以及自己所有的子元素，0或false仅仅复制元素本身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="btn" type="button" value="复制"/>
</body>
<script>
function func() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oUl = document.getElementById("list");
document.body.appendChild(oUl.cloneNode(1));
}
}
func()
</script>
</html>
7.替换元素
语法：
A.replacechild(new, old)
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>JavaScript</p>
<hr/>
输入标签：<input id="tag" type="text"/><br/>
输入内容：<input id="txt" type="text"/><br/>
<input id="btn" type="button" value="替换"/>
</body>
<script>
function func() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oFirst = document.querySelector("body *:first-child");
var oTag = document.getElementById("tag");
var oTxt = document.getElementById("txt");
// 根据两个文本框的值来创建新的节点
var oNewTag = document.createElement(oTag.id);
var oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag, oFirst);
}
}
func()
</script>
</html>
如图：
点击替换：
