<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
-
1. 创建节点 (createElement)
let oSpan = document.createElement("span");
console.log(oSpan); // <span></span>
console.log(typeof oSpan); // object
-
2. 添加节点 (appendChild)
- 注意点: appendChild会将指定的元素添加到最后
let oDiv = document.querySelector("div");
let oSpan = document.createElement("span"); // 创建一个span节点
oDiv.appendChild(oSpan); // 将span节点添加到div中
-
3. 插入节点 (insertBefore)
let oDiv = document.querySelector("div");
let oSpan = document.createElement("span");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oP);
-
4. 删除节点 (parentNode.removeChild)
- 注意点: 在 js 中如果想要删除某一个元素, 只能通过对应的父元素来删除, 元素是不能够自杀的
let oDiv = document.querySelector("div");
let oSpan = document.createElement("span");
oDiv.appendChild(oSpan);
oSpan.parentNode.removeChild(oSpan);
-
5. 克隆节点
- 注意点: cloneNode 方法默认不会克隆子元素, 如果想要克隆子元素需要传递一个 true
let oDiv = document.querySelector("div");
let newDiv = oDiv.cloneNode(); // <div></div>
let newDiv = oDiv.cloneNode(true); // <div>...</div>
console.log(newDiv);
