JavaScript关于DOM的节点增删改查

1.创建节点

let oSpan=document.createElement("span");
console.log(oSpan);
console.log(typeof oSpan);

2.添加节点

let oDiv = document.querySelector("div");
oDiv.appendChild(oSpan);//将指定元素添加到最后 显示div中
let oA=document.createElement("a")
oDiv.appendChild(a);

3.插入节点

let oSpan=document.createElement("span");
let oDiv=document.querySelector("div");
let oH =document.querySelector("h1");//取得h1标签
oDiv.insertBefore(oSpan,oH);//将span标签添加到h1标签的前面

4.删除节点

//只能通过父元素来删除
console.log(oSpan.parentNode);
oSpan.parentNode.removeChild(oSpan);
oDiv.parentNode.removeChild(oDiv)

5.克隆节点

//cloneNode默认方法不会克隆子元素,如果想克隆子元素 需返回true
let oDiv=document.querySelector("div");
let newDiv=oDiv.cloneNode(true);
console.log(newDiv);