新增节点
新增同级节点
node.before()、node.after()
| node.before() | node.after() | |
|---|---|---|
| 作用 | 新增同级节点 | 新增同级节点 |
| 添加位置 | 之前 | 之后 |
| 插入内容 | Nodes、DOMString | Nodes、DOMString |
注意：
1.添加的DOMString是以Text的方式插入的。
案例：
<!DOCTYPE html>
<html>
<head>
<title>导入节点</title>
</head>
<body>
<span id="message">
设备
</span>
<script type="text/javascript">
let div1 = document.createElement("div")
let div2 = document.createElement("div")
div1.innerHTML = "之前新增节点Node"
div2.innerHTML = "之后新增节点Node"
let div = document.getElementById("message");
div.before(div1)
div.before("<div>之前新增节点DOMString</div>")
div.after(div2)
div.after("<div>之后新增节点DOMString</div>")
</script>
</body>
</html>
结果：
图片.png
新增节点
新增子节点
node.appendChild()、node.append()、node.prepend()
| node.appendChild() | node.append() | node.insertBefore() | node.prepend() | |
|---|---|---|---|---|
| 作用 | 新增子节点 | 新增子节点 | 新增子节点 | 新增子节点 |
| 添加位置 | 子节点列表的末尾 | 子节点列表的末尾 | 子节点列表的首部 | 子节点列表的首部 |
| 插入内容 | Node【只能插入节点且一个节点】 | Nodes、DOMString | Node【只能插入节点且一个节点】 | Nodes、DOMString |
| 影响 | 如果被插入的节点已经在当前文档中，此方法只进行节点的移动 | Nodes、DOMString | 如果被插入的节点已经在当前文档中，此方法只进行节点的移动 | Nodes、DOMString |
案例：
<!DOCTYPE html>
<html>
<head>
<title>插入兄弟结点</title>
</head>
<body>
<div style="border: 1px solid #0000FF; margin-top: 10px;">
<div id="message1">
设备
</div>
</div>
<div style="border: 1px solid #0000FF; margin-top: 10px;">
<div id="message2">
设备
</div>
</div>
<script type="text/javascript">
let message1 = document.getElementById("message1");
let message2 = document.getElementById("message2");
let div1 = document.createElement("div")
let div2 = document.createElement("div")
let div3 = document.createElement("div")
div1.innerHTML = "之前新增子节点Node"
div2.innerHTML = "之后新增子节点Node"
div3.innerHTML = "之后新增子节点NodeChild"
message1.prepend(div1)
message1.prepend("<div>之前新增子节点DOMString</div>")
message1.append(div2)
message1.append("<div>之后新增子节点DOMString</div>")
message1.appendChild(div3)
message2.append(div2, "<div>之后新增子节点DOMString</div>")
// 添加子节点，如果当前文档中已经添加此节点，则进行位置的移动
message2.appendChild(div3)
</script>
</body>
</html>
结果
添加子节点.png
创建节点
document.createElement()【创建HTML标签】
document.createElement(tagName)根据tagName创建一个HTML标签；如果用户代理无法识别tagName，则会生成一个未知的HTML元素。
案例：
<!DOCTYPE html>
<html>
<head>
<title>创建HTML元素</title>
</head>
<body>
<script type="text/javascript">
let div = document.createElement("div")
div.innerHTML = "js动态创建的HTML元素"
document.body.append(div)
</script>
</body>
</html>
结果：
创建节点.png
document.createElement(文本)【创建Text节点】
document.createTextNode(文本)创建一个新的文本节点。通过此方法可以用来转义HTML字符。
<!DOCTYPE html>
<html>
<head>
<title>创建HTML元素和文本节点</title>
</head>
<body>
<script type="text/javascript">
let div = document.createElement("div")
let text = document.createTextNode("js动态创建的文本节点和HTML节点")
div.append(text)
document.body.append(div)
</script>
</body>
</html>
创建文本节点.png
document.createAttribute(name)【创建属性节点】
document.createAttribute("id")创建并返回一个属性节点，其中value属性表示属性的值。
案例：
<!DOCTYPE html>
<html>
<head>
<title>创建属性节点</title>
</head>
<body>
<script type="text/javascript">
let div = document.createElement("div");
let text = document.createTextNode("js动态创建属性节点")
let id = document.createAttribute("id")
id.value = "id1";
console.dir(id)
div.append(text)
div.setAttributeNode(id)
document.body.append(div)
</script>
</body>
</html>
结果：
属性节点.png
创建属性节点.png
node.cloneNode(deep)【克隆一个node节点】
node.cloneNode(deep)该方法返回调用该方法的节点的一个副本。【node表示原始节点；deep表示是否深度克隆，即是否克隆子节点】
注意：
1.克隆一个元素结点会拷贝它所有的属性以及属性值，但是不会拷贝使用js动态绑定的事件。
2.如果原始节点有唯一值的属性，如id、name，建议修改其值。
案例
<!DOCTYPE html>
<html>
<head>
<title>克隆节点</title>
</head>
<body>
<div id="message">
设备
</div>
<script type="text/javascript">
let source = document.getElementById("message")
let divdeep = source.cloneNode(true)
divdeep.id = "divdeep"
let divnodeep = source.cloneNode(false)
divnodeep.id = "divnodeep"
document.body.append(divdeep, divnodeep)
</script>
</body>
</html>
结果
克隆节点.png
document.importNode()【导入一个节点】
document.importNode(oldNode, deep)表示将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中。【oldNode表示一个源节点， deep为布尔类型，表示是否导入子节点】
<!DOCTYPE html>
<html>
<head>
<title>导入节点</title>
</head>
<body>
<div id="message">
设备
</div>
<script type="text/javascript">
let source = document.getElementById("message")
let divdeep = document.importNode(source, true)
divdeep.id = "divdeep"
let divnodeep = document.importNode(source, false)
divnodeep.id = "divnodeep"
document.body.append(divdeep, divnodeep)
</script>
</body>
</html>
结果：
克隆节点.png
删除节点【通过父元素删除子节点】
node.removeChild从DOM中删除一个子节点，返回删除的节点。
