-
增删改
DOM 节点的操作 添加 插入 替换 移除这些操作 都是有父节点完成的 1. 创建节点和添加节点 2. 指定节点之前插入节点 3. 替换节点 4. 移除节点
-
演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> // 创建一个段落节点 给添加在body上 var p_node = document.createElement("p") // 添加在body 添加在指定标签节点的末尾 document.body.appendChild(p_node) // 创建文本节点 var text_node = document.createTextNode("我是文本节点") // 文本是嵌套在标签之间的 文本节点是元素节点的子节点 p_node.appendChild(text_node) // 在指定元素前插入节点 var a_node = document.createElement("a") a_node.innerText = "百度一下" // 属性 a_node.setAttribute("href", "http://www.baidu.com") // 新添加的节点 在哪个节点之前 document.body.insertBefore(a_node, p_node) // 替换 var b_node = document.createElement("b") b_node.innerText = "静夜思" // 将b节点替换掉a节点 新节点 旧节点 document.body.replaceChild(b_node, a_node) // 删除节点 删除p节点 document.body.removeChild(p_node) </script> </body> </html>