创建新的 HTML 元素 (节点) - appendChild()

实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="div1"><p id="demo">原始节点</p><button id="add">添加新节点</button></div></body><script>document.getElementById("add").addEventListener('click',add);function add(){var para = document.createElement('p');para.className ="p1";//让新增的每个p节点的class名为"p1"var content = document.createTextNode("新的一条节点");para.appendChild(content);var element = document.getElementById("div1");element.appendChild(para);}</script>
</html>

实例解析：
以下代码是用于创建 <p> 元素:

var para = document.createElement('p');

为 <p> 元素创建一个新的文本节点：

var content = document.createTextNode("新的一条节点");

将文本节点添加到 <p> 元素中：

para.appendChild(content);

最后，在一个已存在的元素中添加 p 元素。
查找已存在的元素：

var element = document.getElementById("div1");

添加到已存在的元素中:

element.appendChild(para);

运行截图：

创建新的 HTML 元素 (节点) - insertBefore()

实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="div1"><p id="demo">原始节点</p><button id="add">添加新节点</button></div></body><script>document.getElementById("add").addEventListener('click',add);function add(){var para = document.createElement('p');para.className ="p1";//让新增的每个p节点的class名为"p1"var content = document.createTextNode("新的一条节点");para.appendChild(content);var element = document.getElementById("div1");element.insertBefore(para,demo);}</script>
</html>

实例解析：

     element.insertBefore(para,demo);

在id为demo标签前面插上para节点。

运行截图：

移除已存在的元素

在前面代码的基础上再添加移除代码
实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="div1"><p id="demo">原始节点</p><button id="add">添加新节点</button><button id="del">移除新节点</button></div></body><script>document.getElementById("add").addEventListener('click',add);document.getElementById("del").addEventListener('click',del);var count = -1;function add(){var para = document.createElement('p');para.className ="p1";//让新增的每个p节点的class名为"p1"var content = document.createTextNode("新的一条节点");para.appendChild(content);var element = document.getElementById("div1");count++;element.appendChild(para);}function del(){var parent = document.getElementById("div1");var child = document.getElementsByClassName("p1")[0];if(document.getElementsByClassName('p1')[0]==null){alert('已经移除完了');return 0;}parent.removeChild(child);count -= 1;}</script>
</html>

移除函数：

function del(){var parent = document.getElementById("div1");var child = document.getElementsByClassName("p1")[0];if(document.getElementsByClassName('p1')[0]==null){return 0;}parent.removeChild(child);count -= 1;}

实例解析：
查找 id="div1" 的元素:

var parent = document.getElementById("div1");

查找第一条class="p1" 的 <p> 元素:

var child = document.getElementById("p1")[0];

从父元素中移除子节点（每个class="p1"标签的第一个子节点）：

parent.removeChild(child);

判断是否移除完毕，若移除完毕则退出函数：

document.getElementsByClassName('p1')[0]==null

运行截图：

替换 HTML 元素 - replaceChild()

代码实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="div1"><p id="demo">原始节点</p><button id="add">添加新节点</button><button id="del">移除新节点</button><button id="rep">替换修改新节点</button></div></body><script>document.getElementById("add").addEventListener('click',add);document.getElementById("del").addEventListener('click',del);document.getElementById("rep").addEventListener('click',rep);var count = -1;var count1 = 0;function add(){var para = document.createElement('p');para.className ="p1";//让新增的每个p节点的class名为"p1"var content = document.createTextNode("新的一条节点");para.appendChild(content);var element = document.getElementById("div1");count++;element.appendChild(para);}function del(){var parent = document.getElementById("div1");var child = document.getElementsByClassName("p1")[0];if(document.getElementsByClassName('p1')[0]==null){alert('已经移除完了');return 0;}parent.removeChild(child);count -= 1;count1 -= 1;}function rep(){if(count>-1){var para = document.createElement("p");para.className="p1";var node = document.createTextNode("修改替换后的节点");para.appendChild(node);var parent = document.getElementById("div1");var child = document.getElementsByClassName("p1")[count1];console.log(count);if(document.getElementsByClassName('p1')[count].innerHTML=="新的一条节点"){count1 += 1;parent.replaceChild(para,child);}else{alert("全都替换完毕");return 0;}}else alert('没有可替换选项');}</script>
</html>

 function rep(){if(count>-1){var para = document.createElement("p");para.className="p1";var node = document.createTextNode("修改替换后的节点");para.appendChild(node);var parent = document.getElementById("div1");var child = document.getElementsByClassName("p1")[count1];console.log(count);if(document.getElementsByClassName('p1')[count].innerHTML=="新的一条节点"){count1 += 1;parent.replaceChild(para,child);}else{return 0;}}}

实例解析：
让新节点替换原来的节点（从第一条开始替换）：
新节点para,旧节点child

parent.replaceChild(para,child);

判断最后一条旧节点是否还存在，若存在进行替换操作，否则替换完毕：

document.getElementsByClassName('p1')[count].innerHTML=="新的一条节点")

运行截图：

总结：

appendChild(para)//新增子节点，添加新元素para到尾部

insertBefore(para,child)//新节点para元素添加到指定的节点child元素的开始位置

parent.removeChild(child);//从父元素parent中删除子节点child

replaceChild(para,child);//让para节点替换child节点

【web前端】JavaScript DOM元素(节点的创建appendChild()，删除removeChild()，修改replaceChild())相关推荐

JavaScript DOM 6 - 节点的创建，插入，替换，删除
1: 节点的创建新建一个新节点的方式主要有三种: 1: createElement() document.createElement(tagName); //返回一个HTMLElement类型的节点 ...
web前端-JavaScript中的函数（创建，参数，返回值，方法，函数作用域，立即执行函数）
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
web前端JavaScript嵌入百度地图API的方法最详细
web前端JavaScript嵌入百度地图API最详细的方法一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码在阿里iconfont中创建项目新建项目搜索自己想要的图标并添加入库点击购物车添加至项目回到"我的项目" ...
html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
JavaScript - DOM 克隆节点方法 - cloneNode
JavaScript - DOM 克隆节点方法 - cloneNode 具体看代码即可:(调用者为要克隆的节点) <!DOCTYPE html> <html lang="e ...

【web前端】JavaScript DOM元素(节点的创建appendChild()，删除removeChild()，修改replaceChild())

创建新的 HTML 元素 (节点) - appendChild()

创建新的 HTML 元素 (节点) - insertBefore()

移除已存在的元素

替换 HTML 元素 - replaceChild()

总结：

【web前端】JavaScript DOM元素(节点的创建appendChild()，删除removeChild()，修改replaceChild())相关推荐

最新文章

热门文章