节点操作
创建节点
- 元素节点:document.createElement(“标签名”);
返回值:新的元素节点
创建完成后,需要插入到页面中才能看到 - 文本节点
document.createTextNode(内容); - 插入节点
node.appendChild
在父节点的最后添加一个新的子节点。
node.insertBefore(新节点,参考节点)
在父节点的参考节点前添加一个新的子节点。
如果参考节点为null,则在父节点的最后添
加新的子节点 - 删除节点
父节点.removeChild(子节点);
在父节点中移除该子节点
parentNode 父节点
自身元素.parentNode.remove()
node.remove();
在父节点中移除自身。 - 替换节点:
用一个节点去替换另外一个节点
父节点.replaceChild(新节点,旧节点); - 复制节点
node.cloneNode([true]);
复制节点,克隆节点
如果参数为true,则将其所有子节点也克隆。
<script>
window.onload = function() {
// 创建节点
var box = document.getElementsByTagName("div")[0];
var p = document.createElement("p");
console.log(p);
}
</script>
</head>
<body>
<div class="box">
<p>这是个p标签</p>
</div>
</body>
创建节点
文本节点,插入节点:
<script>
window.onload = function() {
//获取id节点
var box = document.getElementById("box");
//文本节点
var text = document.createTextNode("三十功名尘与土");
console.log(text);
box.appendChild(text);
}
</script>
<body>
<div id="box">
<p>八千里路云和月
<span>满江红</span>
</p>
<p>臣子恨,何时灭</p>
</div>
</body>
替换子节点
<script>
window.onload = function() {
var p = document.createElement("p");
p.innerHTML = "三十功名尘与土";
//获取id节点
var box = document.getElementById("box");
//替换子节点
box.replaceChild(p, box.lastElementChild);
}
</script>
<body>
<div id="box">
<p>八千里路云和月
<