js元素创建 | 易学教程

创建节点

document.createElement 创建节点
创建的节点此时还未在浏览器上需要用过appendChild（）或者其他方法添加到浏览器上

经常与appendChild（）方法连用
appendChild（）: 在子节点末尾添加新的节点
用法：
parent.appendChild（）
代码示例：

window.onload=function () {
            document.querySelector(".btn").onclick=function () {//每点击一次创建一个div
                let div1=document.createElement("div");//创建元素节点
                let oDiv=document.querySelector(".box");//获取父元素
                oDiv.appendChild(div1)//在父元素下添加div  此时div没有内容
            }
        }

结果
在这里插入图片描述

如果要给div添加文字必须通过createTextNode

docuemnt.createTextNode() 创建文本节点
通过appendChild（）方法添加到div节点下
这样创建的div元素就包含元素
window.οnlοad=function () {
document.querySelector(".btn").οnclick=function () {
let div1=document.createElement(“div”);
let oDiv=document.querySelector(".box");
let text=document.createTextNode(“create text node”);
div1.appendChild(text);
oDiv.appendChild(div1)
}
}
执行效果：
在这里插入图片描述

document.replayceChild(newNode,oldNode);

把旧节点替换成新节点

window.onload=function () {
            document.querySelector(".btn").onclick=function () {
                let oDiv=document.querySelector(".box");
                let div1=document.createElement("div");
                let text=document.createTextNode("新节点");
                div1.appendChild(text);
                oDiv.parentNode.replaceChild(div1,oDiv);
            }
        }

在这里插入图片描述

Node.cloneNode(boolean) 克隆节点所有属性

boolean取值：
true 克隆当前元素及子元素的节点以及内容以及属性（文本内容）
false：克隆当前元素的节点及属性

取值为true
在这里插入图片描述
取值为false

NODE.removeChild() 删除当前节点的子节点

来源：CSDN

作者：lin1072368472

链接：https://blog.csdn.net/lin1072368472/article/details/104106626

标签

queryselector