【EASYDOM系列教程】之创建页面元素
Document 对象提供了可以创建元素节点、属性节点和文本节点的方法,方便 DOM 更新 HTML 页面中的元素。
创建元素节点
Document 对象提供了 createElement() 方法创建元素节点,其语法格式如下:
element = document.createElement(tagName);
上述语法格式中,tagName 是参数,表示创建元素的元素名称。element 是返回值,表示创建的元素。
值得注意的是: createElement() 方法优先将参数转换为小写。
下面是使用 createElement() 方法的示例代码:
var div = document.getElementById('group');
// 创建新的元素节点
var elem = document.createElement('button');
div.appendChild(elem);
上述示例代码通过 createElement() 方法创建了 button 元素,并将其添加到 HTML 页面中。
完整示例代码请点击右边的链接: createElement() 方法完整示例代码
创建文本节点
Document 对象提供了 createTextNode() 方法创建文本节点,其语法格式如下:
textNode = document.createTextNode(data);
上述语法格式中,data 是参数,包含了放在文本节点中的内容,是一个字符串。textNode 是返回值,表示创建的文本节点。
下面是使用 createTextNode() 方法的示例代码:
var div = document.getElementById('group');
// 创建新的元素节点
var elem = document.createElement('button');
// 创建文本节点
var text = document.createTextNode('New Button');
// 将文本节点添加到新的元素节点
elem.appendChild(text);
// 将新的元素节点添加到父级元素节点
div.appendChild(elem);
上述示例代码先通过 createElement() 方法创建了 button 元素,再通过 createTextNode() 方法创建了一个新的文本节点,并将其添加到新创建的 button 元素中。
完整示例代码请点击右边的链接: createTextNode() 方法完整示例代码
创建属性节点
Document 对象提供了 createAtrribute() 方法创建属性节点,其语法格式如下:
attributeNode = document.createAttribute(name);
上述语法格式中,name 是参数,属性节点的属性名称。attributeNode 是返回值,表示创建的属性节点。
值得注意的是:
创建属性节点方法只具有属性名称,没有属性值。想要设置属性值需要通过 nodeValue 属性完成。
由于属性节点不是元素节点的子节点,不能使用添加子节点方式操作属性节点。想要添加属性节点需要通过 setAttributeNode() 方法完成。
下面是使用 createAtrribute() 方法的示例代码:
var div = document.getElementById('group');
// 创建新的元素节点
var elem = document.createElement('button');
// 创建文本节点
var text = document.createTextNode('New Button');
elem.appendChild(text);
// 创建属性节点
var attribute = document.createAttribute('class');
// 设置属性的值
attribute.nodeValue = 'button';
// 将属性节点添加到元素节点
elem.setAttributeNode(attribute);
div.appendChild(elem);
上述示例代码先通过 createAtrribute() 方法创建了 ,再通过 createTextNode() 方法创建了一个新的文本节点,并将其添加到新创建的 button 元素中。最后,通过 createAttribute() 方法创建 class 属性节点,并设置了属性值为 button,再将该属性节点添加到新创建的 button 元素中。
完整示例代码请点击右边的链接: createAtrribute() 方法完整示例代码
本教程免费开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。
本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
【EASYDOM系列教程】之创建页面元素相关推荐
- 【EASYDOM系列教程】之 DOM 元素树
DOM 元素树结构与 DOM 节点树结构很相似,区别仅在于是利用节点解析 HTML 元素,还是利用元素解析 HTML 元素. DOM 树结构 还记得下面这张图吗? 上图中的 HTML 页面源代码如下: ...
- SharePoint 2013 入门教程之创建页面布局及页面
原文:SharePoint 2013 入门教程之创建页面布局及页面 在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoi ...
- maven web项目导入sts_Spring Boot2 系列教程(二)创建 Spring Boot 项目的三种方式
我最早是 2016 年底开始写 Spring Boot 相关的博客,当时使用的版本还是 1.4.x ,文章发表在 CSDN 上,阅读量最大的一篇有 43W+,如下图: 2017 年由于种种原因,就没有 ...
- Selenium系列教程 - 使用 expected_conditions 判断元素
主要内容 1. expected_conditions 模块 2. 使用场景 1. expected_conditions 模块 我们看一下 expected_conditions 提供的条件有哪些: ...
- stm32cubemx生成不了keil工程文件_STM32CubeMX系列教程03_创建并生成代码工程
说明: 本文原创作者『strongerHuang』 首发于微信公众号『嵌入式专栏』,同时也更新在我的个人网站:EmbeddedDevelop 标签:STM32. STM32CubeMX. LL库. H ...
- html dom树结构,【EASYDOM系列教程】之DOM 树结构
DOM 树结构 DOM 之所以可以访问和更新 HTML 页面中的内容.结构和样式,是因为 DOM 将 HTML 页面解析为一个 树结构. 例如下面这段代码是一个简单的 HTML 页面源代码: 示例页面 ...
- 【EASYDOM系列教程】之 textContent 属性
Node 对象提供了 textContent 属性实现获取或设置 HTML 页面中指定元素的文本内容. 获取文本内容 textContent 属性表示 HTML 页面指定节点及其后代节点的文本内容.其 ...
- NetworkX系列教程(1)-创建graph
小书匠Graph图论 研究中经常涉及到图论的相关知识,而且常常面对某些术语时,根本不知道在说什么.前不久接触了NetworkX这个graph处理工具,发现这个工具已经解决绝大部分的图论问题(也许只是我 ...
- jQuery创建页面元素
创建元素三种方式 使用HTML标签创建 var txt1="<p>文本</p>"; 使用DOM创建 var txt2=document.createElem ...
最新文章
- 服务器 声音文件 nginx,docker nginx搭建视频音频服务器
- Linux内核如何装载和启动一个可执行程序
- 也谈闭包--小白的JS进阶之路
- javascript(js)获取访客通过搜索引擎进入页面的搜索关键词的简洁有效代码
- JS----javascript原型和原型链
- 北大文科生能选计算机专业么,文科计算机基础和文科计算机专题
- Linux 下, npm i 老是被killed 已杀死
- java小程序开发平台,隔壁都馋哭了
- Java—synchronized和ReentrantLock锁详解
- 第二季-专题8-不用内存怎么行
- qt制作2048小游戏
- Android 图片高斯模糊处理
- java进度条代码,java进度条代码该怎么编写?
- Spring原理机制
- 视差贴图,凹凸贴图,法线贴图和位移贴图的区别
- Singularity 代码阅读笔记[结构: Struct_Microsoft_Singularity_BootInfo]
- win7批量修改计算机名,文件批量改名助手
- Javaweb_文件上传
- 解决vscode下载速度太慢的问题
- 手机上的python怎么运行,python在手机上怎么操作
热门文章
- 深入解析JNA—模拟C语言结构体
- head在linux命令中什么意思,Linux系统中head命令如何使用
- java 文件 递归_JAVA实现遍历文件夹下的所有文件(递归调用和非递归调用)
- oracle set markup,oracle sql*plus set spool介绍(二)
- java+spring+mysql配置_JAVA后台搭建(springboot+mybatis+mysql)项目搭建
- 获取用户列表为空_数据结构和算法(Golang实现)(15)常见数据结构-列表
- python list遍历删除_Python中list循环遍历删除数据的正确方法
- php post请求跳转,学习猿地-php如何实现post跳转
- 数据分析——朴素贝叶斯原理示意图
- from flask.ext.cache import make_template_fragment_key