创建节点
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
let oSpan = document.createElement("span");
console.log(oSpan);
console.log(typeof oSpan);
</script>
</body>
</html>
添加节点
注意点:appendChild
方法会将指定的元素添加到最后:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div></div>
<script>
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
oDiv.appendChild(oSpan)
let oA = document.createElement("a");
oDiv.appendChild(oA);
</script>
</body>
</html>
插入节点
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script>
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oH1);
oDiv.insertBefore(oSpan, oP);
</script>
</body>
</html>
删除节点
注意点:在 js
中如果想要删除某一个元素, 只能通过对应的 父元素
来删除,元素是不能够自杀的:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script>
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oP);
console.log(oSpan.parentNode);
oSpan.parentNode.removeChild(oSpan);
oDiv.parentNode.removeChild(oDiv);
</script>
</body>
</html>
克隆节点
注意点:cloneNode
方法默认不会克隆子元素, 如果想克隆子元素需要传递一个 true
:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script>
let oDiv = document.querySelector("div");
let newDiv1 = oDiv.cloneNode();
console.log(newDiv1);
let newDiv2 = oDiv.cloneNode(true);
console.log(newDiv2);
</script>
</body>
</html>