新增節(jié)點(diǎn)
新增同級(jí)節(jié)點(diǎn)
node.before()、node.after()
| node.before() | node.after() | |
|---|---|---|
| 作用 | 新增同級(jí)節(jié)點(diǎn) | 新增同級(jí)節(jié)點(diǎn) |
| 添加位置 | 之前 | 之后 |
| 插入內(nèi)容 | Nodes、DOMString | Nodes、DOMString |
注意：
1.添加的DOMString是以Text的方式插入的。
案例：
<!DOCTYPE html>
<html>
<head>
<title>導(dǎo)入節(jié)點(diǎn)</title>
</head>
<body>
<span id="message">
設(shè)備
</span>
<script type="text/javascript">
let div1 = document.createElement("div")
let div2 = document.createElement("div")
div1.innerHTML = "之前新增節(jié)點(diǎn)Node"
div2.innerHTML = "之后新增節(jié)點(diǎn)Node"
let div = document.getElementById("message");
div.before(div1)
div.before("<div>之前新增節(jié)點(diǎn)DOMString</div>")
div.after(div2)
div.after("<div>之后新增節(jié)點(diǎn)DOMString</div>")
</script>
</body>
</html>
結(jié)果：
圖片.png
新增節(jié)點(diǎn)
新增子節(jié)點(diǎn)
node.appendChild()、node.append()、node.prepend()
| node.appendChild() | node.append() | node.insertBefore() | node.prepend() | |
|---|---|---|---|---|
| 作用 | 新增子節(jié)點(diǎn) | 新增子節(jié)點(diǎn) | 新增子節(jié)點(diǎn) | 新增子節(jié)點(diǎn) |
| 添加位置 | 子節(jié)點(diǎn)列表的末尾 | 子節(jié)點(diǎn)列表的末尾 | 子節(jié)點(diǎn)列表的首部 | 子節(jié)點(diǎn)列表的首部 |
| 插入內(nèi)容 | Node【只能插入節(jié)點(diǎn)且一個(gè)節(jié)點(diǎn)】 | Nodes、DOMString | Node【只能插入節(jié)點(diǎn)且一個(gè)節(jié)點(diǎn)】 | Nodes、DOMString |
| 影響 | 如果被插入的節(jié)點(diǎn)已經(jīng)在當(dāng)前文檔中，此方法只進(jìn)行節(jié)點(diǎn)的移動(dòng) | Nodes、DOMString | 如果被插入的節(jié)點(diǎn)已經(jīng)在當(dāng)前文檔中，此方法只進(jìn)行節(jié)點(diǎn)的移動(dòng) | Nodes、DOMString |
案例：
<!DOCTYPE html>
<html>
<head>
<title>插入兄弟結(jié)點(diǎn)</title>
</head>
<body>
<div style="border: 1px solid #0000FF; margin-top: 10px;">
<div id="message1">
設(shè)備
</div>
</div>
<div style="border: 1px solid #0000FF; margin-top: 10px;">
<div id="message2">
設(shè)備
</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 = "之前新增子節(jié)點(diǎn)Node"
div2.innerHTML = "之后新增子節(jié)點(diǎn)Node"
div3.innerHTML = "之后新增子節(jié)點(diǎn)NodeChild"
message1.prepend(div1)
message1.prepend("<div>之前新增子節(jié)點(diǎn)DOMString</div>")
message1.append(div2)
message1.append("<div>之后新增子節(jié)點(diǎn)DOMString</div>")
message1.appendChild(div3)
message2.append(div2, "<div>之后新增子節(jié)點(diǎn)DOMString</div>")
// 添加子節(jié)點(diǎn)，如果當(dāng)前文檔中已經(jīng)添加此節(jié)點(diǎn)，則進(jìn)行位置的移動(dòng)
message2.appendChild(div3)
</script>
</body>
</html>
結(jié)果
添加子節(jié)點(diǎn).png
創(chuàng)建節(jié)點(diǎn)
document.createElement()【創(chuàng)建HTML標(biāo)簽】
document.createElement(tagName)根據(jù)tagName創(chuàng)建一個(gè)HTML標(biāo)簽；如果用戶代理無(wú)法識(shí)別tagName，則會(huì)生成一個(gè)未知的HTML元素。
案例：
<!DOCTYPE html>
<html>
<head>
<title>創(chuàng)建HTML元素</title>
</head>
<body>
<script type="text/javascript">
let div = document.createElement("div")
div.innerHTML = "js動(dòng)態(tài)創(chuàng)建的HTML元素"
document.body.append(div)
</script>
</body>
</html>
結(jié)果：
創(chuàng)建節(jié)點(diǎn).png
document.createElement(文本)【創(chuàng)建Text節(jié)點(diǎn)】
document.createTextNode(文本)創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)。通過(guò)此方法可以用來(lái)轉(zhuǎn)義HTML字符。
<!DOCTYPE html>
<html>
<head>
<title>創(chuàng)建HTML元素和文本節(jié)點(diǎn)</title>
</head>
<body>
<script type="text/javascript">
let div = document.createElement("div")
let text = document.createTextNode("js動(dòng)態(tài)創(chuàng)建的文本節(jié)點(diǎn)和HTML節(jié)點(diǎn)")
div.append(text)
document.body.append(div)
</script>
</body>
</html>
創(chuàng)建文本節(jié)點(diǎn).png
document.createAttribute(name)【創(chuàng)建屬性節(jié)點(diǎn)】
document.createAttribute("id")創(chuàng)建并返回一個(gè)屬性節(jié)點(diǎn)，其中value屬性表示屬性的值。
案例：
<!DOCTYPE html>
<html>
<head>
<title>創(chuàng)建屬性節(jié)點(diǎn)</title>
</head>
<body>
<script type="text/javascript">
let div = document.createElement("div");
let text = document.createTextNode("js動(dòng)態(tài)創(chuàng)建屬性節(jié)點(diǎn)")
let id = document.createAttribute("id")
id.value = "id1";
console.dir(id)
div.append(text)
div.setAttributeNode(id)
document.body.append(div)
</script>
</body>
</html>
結(jié)果：
屬性節(jié)點(diǎn).png
創(chuàng)建屬性節(jié)點(diǎn).png
node.cloneNode(deep)【克隆一個(gè)node節(jié)點(diǎn)】
node.cloneNode(deep)該方法返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本?！緉ode表示原始節(jié)點(diǎn)；deep表示是否深度克隆，即是否克隆子節(jié)點(diǎn)】
注意：
1.克隆一個(gè)元素結(jié)點(diǎn)會(huì)拷貝它所有的屬性以及屬性值，但是不會(huì)拷貝使用js動(dòng)態(tài)綁定的事件。
2.如果原始節(jié)點(diǎn)有唯一值的屬性，如id、name，建議修改其值。
案例
<!DOCTYPE html>
<html>
<head>
<title>克隆節(jié)點(diǎn)</title>
</head>
<body>
<div id="message">
設(shè)備
</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>
結(jié)果
克隆節(jié)點(diǎn).png
document.importNode()【導(dǎo)入一個(gè)節(jié)點(diǎn)】
document.importNode(oldNode, deep)表示將外部文檔的一個(gè)節(jié)點(diǎn)拷貝一份,然后可以把這個(gè)拷貝的節(jié)點(diǎn)插入到當(dāng)前文檔中?！緊ldNode表示一個(gè)源節(jié)點(diǎn)， deep為布爾類型，表示是否導(dǎo)入子節(jié)點(diǎn)】
<!DOCTYPE html>
<html>
<head>
<title>導(dǎo)入節(jié)點(diǎn)</title>
</head>
<body>
<div id="message">
設(shè)備
</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>
結(jié)果：
克隆節(jié)點(diǎn).png
刪除節(jié)點(diǎn)【通過(guò)父元素刪除子節(jié)點(diǎn)】
node.removeChild從DOM中刪除一個(gè)子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)。
