DOM-添加元素、节点
createElement()方法能够根据参数指定的标签名称创建一个新元素,并返回新建元素的引用,用法如下
var element=document.createElement("tagName");
其中element表示新建元素的引用,createElement()是document对象的一个方法,该方法只有一个参数,用来指定创建元素的标签名称。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大,无奇不有</p> <ul></ul> <script> var element=document.createElement("p"); var b=element.nodeName; var v=element.nodeType; document.body.appendChild(element); //添加到body 子节点下 element.innerHTML="我也想去看看"; //给元素加上内容 alert(b+v);</script> </body> </html>
使用createElement()方法创建的新元素不会被自动添加到文档中,因为新元素还没有nodeParent属性,仅在javascript上下文中有效,如果要把这个元素添加到文档中,还需要使用appendChild()、insertBefore()或replaceChild()方法实现。
复制节点
cloneNode()方法可以创建一个节点的副本,其用法如下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大,无奇不有</p> <ul></ul> <script>var p=document.createElement("p"); //创建p元素var h1=document.createElement("h1"); //创建h1元素var txt=document.createTextNode("你好,世界"); //创建文本节点var hello=txt.cloneNode(false); //复制创建的文本节点p.appendChild(hello); //把复制的文本节点添加到段落中h1.appendChild(p); //把段落节点增加到h1标题中document.body.appendChild(h1); //把标题节点增加到body中 </script> </body> </html>
由于赋值节点会包含节点的所有特性,如果原节点中包含ID属性,就会出现id属性重叠情况,一般情况下,在同一个文档中,不同呀U尿素的id属性值应该不同,为了避免
潜在冲突,应修改其中某个节点id属性值。
插入节点
1.appendChild()方法
appendChild()方法可向当前节点的子节点列表的末尾添加新的子节点,用法如下
appendChild(newChild);
参数newchild表示新添加的节点对象,并返回新节点。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大,无奇不有</p> <ul></ul> <script> var p=document.createElement("p"); //创建段落元素 var txt=document.createTextNode("你好世界,世界你好"); //创建文本节点 p.appendChild(txt); //把文本节点添加到段落节点中 document.body.appendChild(p); //把段落节点添加到body节点的末尾处 </script> </body> </html>
2.insertBefore()方法
可在已有的子节点前插入一个新的子节点,用法如下
insertBefore(newchild,refchild);
其中参数newchiild表示插入新的节点,refchild表示在此节点前插入新的子节点,返回新的子节点
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大,无奇不有</p> <ul></ul> <script> var p0=document.getElementById("attr"); var p=document.createElement("p"); //创建段落元素 var txt=document.createTextNode("你好世界,世界你好"); //创建文本节点 p.appendChild(txt); //把文本节点添加到段落节点中 document.body.insertBefore(p,p0); //添加段落p在p0前面 </script> </body> </html>
删除节点
removeChild()方法可以从子节点列表中删除某个节点,用法如下
nodeObject.removeChild(node);
其中参数node为要删除的节点,如果删除成功,则返回被删除的节点,如果失败,则返回null,方使用removeChild()方法删除节点时,该节点所包含的所有子节点将同时被删除
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大,无奇不有</p> <ul></ul> <script> var p=document.getElementById("attr"); //获取段落节点 document.body.removeChild(p); //从body中删除段落节点和所有的子节点 </script> </body> </html>
替换节点
replaceChild()方法可以将某个子节点替换为另一个。用法如下:
转载于:https://www.cnblogs.com/xiaowie/p/10606970.html
DOM-添加元素、节点相关推荐
- JS DOM创建和添加元素节点
JS DOM创建和添加元素节点 文章目录 JS DOM创建和添加元素节点 第一种: createElement() + createTextNode() + appdChild() 第二种: inne ...
- XML DOM – 导航节点概述
通过节点间的关系访问节点树中的节点,通常称为导航节点("navigating nodes").可通过使用节点间的关系对节点进行导航. 导航 DOM 节点 通过节点间的关系访问节点树 ...
- html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
- DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
- DOM判断节点类型分分钟搞定
小编和你一起解锁DOM判断节点类型的秘密 Let's GO ! ! ! Node对象中的nodeName获取指定节点的节点名称 Node对象中的nodeType获取指定节点的节点类型 nodeType ...
- dom操作节点之常用方法
DOM: 获取节点:{ 1. document.getElementById (元素id):通过元素id找到节点 2. document.getElementsByClassName (元素类名cla ...
- jspdf-html2canvas 自动分页 网页导出pdf 自动根据dom子节点的高度进行分页,避免dom的内容在分页的时候被截断
jspdf-html2canvas 网页导出pdf 自动根据dom子节点的高度进行分页,避免dom的内容在分页的时候被截断 说明 直接上代码 说明 要导出的内容用 .pdf 包裹 ,默认会以.pdf的 ...
- DOM是什么(DOM的节点类型)
学到DOM时,看到关于文档(结构树).节点(node).和DOM提供的一些方法获取(找到)所需的节点.还有DOM属性,我很混乱,我无法弄清节点的关系层级属性和方法的关系,所以在使用DOM之前我要先了解 ...
- JavaScript - DOM 克隆节点方法 - cloneNode
JavaScript - DOM 克隆节点方法 - cloneNode 具体看代码即可:(调用者为要克隆的节点) <!DOCTYPE html> <html lang="e ...
- JavaScript——DOM之节点操作
节点操作 前述: 一.节点的概述 二.节点操作 1.节点层级 2.案列-下拉菜单 3.兄弟节点 4.创建节点 5.删除节点 6.案列 :留言并且删除节点 7.复制节点 8.案例:动态生成表格 9.三种 ...
最新文章
- 用标号跳出当前多重嵌套循环是否继续执行循环_4、在JAVA中如何跳出当前的多重嵌套循环?-Java面试题答案...
- python笔记:fancyimpute
- 干货 | 你真的了解 Convolutional Neural Networks 么
- 说实话,你的API接口在高并发面前不堪一击!
- comsol分析时总位移代表什么_【仿真百科】什么是结构力学?
- python列表索引超出范围 等于啥_python中的“列表索引超出范围”
- ES6 开发常用新特性以及简述ES7
- Python简单的拼写检查
- PyTorch 1.0 中文文档:torch.Tensor
- python—将自定义函数的路径添加到系统路径中
- 北京三大春天赏花圣地
- C++实现一个线程池
- 一图秒懂!“天使投资、VC、PE、A轮、B轮、C轮融资”的关系
- 《人机交互技术》 第八章 移动界面设计
- Windows自动更新进程wuauclt.exe 进程服务关闭方法
- 盘点2014:10个词让你看懂今年的移动互联网
- iOS使用wifi传输文件到iPhone
- VIII openstack(2)
- 使用Elasticsearch计算布林带宽度指标
- php riak,Riak的分布式数据库模型 - 分布式数据库相关理论 Part3