1.创建元素
在JavaScript中，我们可以使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。
这种方式又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JavaScript创建的元素。这个元素一开始在HTML中是不存在的。
2.创建一个简单元素
接下来，我们来使用创建元素的方式生成一个加粗的文本内容：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> <div id="content"></div> </body> </html>
window.onload=function() { var oDiv = document.getElementById("content"); var oStrong = document.createElement("strong"); var oTxt = document.createTextNode("IMUSTCTF"); // 将文本节点插入strong元素 oStrong.appendChild(oTxt); // 将strong元素插入div元素 oDiv.appendChild(oStrong); }
3.创建一个复杂元素
如果要创建带有属性的复杂节点，那么代码也会相对复杂一些：
window.onload=function() { var oInput = document.createElement("input"); oInput.id = "submit"; oInput.type = "button"; oInput.value = "登录"; document.body.appendChild(oInput); }
浏览器输出如下：
总结：想要创建一个元素，需要以下4步：
- 创建元素节点：
createElement - 创建文本节点：
createTextNode - 把文本节点插入元素节点：
appendChild - 把组装好的元素插入到已有元素中：
appendChild
4.插入元素
在JavaScript中，插入元素有以下两种方法
appendChild(),insertBefore()
appendChild
在JavaScript中，我们可以使用appendChild()把一个新元素插入到父元素的内部子元素的“末尾”
A.appendChild(B);
A表示父元素，B表示动态创建好的新元素
案例：控制插入信息到列表中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> <input type="text" id="txt"/> <input type="button" id="btn" value="插入"/> </body> </html>
window.onload=function() { 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); } }
输入框中输入VUE，点击插入：
nsertBefore
在JavaScript中，我们可以使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素“之前”
A.insertBefore(B,ref);
A表示父元素，B表示新子元素。ref表示指定子元素，A.insertBefore(B,ref)则表示在ref之前插入B
演示：
window.onload=function() { 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.insertBefore(oLi,oUl.firstElementChild); } }
插入元素后，新的元素会出现在列表的首位：
