1. 创建新的 HTML 元素（DOM 节点） appendChild
<div id="div1">
<p id="p1">这是一段文本</p>
<p id="p2">这也是一段文本</p>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一段新的文本");
para.appendChild(node);
var father=document.getElementById("div1");
father.appendChild(para);
</script>
</div>
创建新的html元素.png
解释.png
2. 删除已有的 HTML 元素 (DOM节点) removeChild
<body>
<div id="div1">
<p id="p1">平帅是真的丑！</p>
<p id="p2">平帅是真的帅！</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
删除已有的html元素.png
解释1.png
3. 删除已有的 HTML 元素(在不引用父元素的情况下)
找到希望删除的子元素，然后使用其 parentNode（返回节点） 属性来找到父元素
<body>
<div id="div1">
<p id="p1">平帅是真的丑！</p>
<p id="p2">平帅是真的帅！</p>
</div>
<script>
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
</script>
</body>
4.修改节点（替换节点） replaceChild
用法：parentNode.replaceChild(newNode,oldNode)
<body>
<div id="div1">
<p id="p1">平帅真的丑</p>
<p id="p2">平帅真尼玛的帅</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("平帅是真几把帅!");
para.appendChild(node)
var child=document.getElementById("p1");
var parent=document.getElementById("div1");
parent.replaceChild(para,child);
</script>
</body>
5. 克隆节点 node.cloneNode(true)
用法：newNode=.oldNode.cloneNode(true)
<body>
<p id="test">平帅好帅！</p>
<script>
var test=document.getElementById("test");
var ctest=test.cloneNode(true);
document.body.appendChild(ctest);
</script>
</body>
网友评论