04-元素增删改查

<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);