JavaScript dom 动态创建标记
此前的大多数DOM都是用来查找元素,getElementById和getElementsByTagName都可以方便快捷的找到文档中的某个或者某些特定的元素节点,这些元素随后可以用诸如setAttribute(改变某个属性的值)和nodeValue(改变某个元素节点所包含的文本)之类的方法和属性来处理。都是对已经存在的元素做出修改。
本文将通过创建新元素和修改现有元素来改变网页结构
标准的DOM方法可以用来替代innerHTML,他提供了更高的精确性和更强大的功能!
DOM方法:
浏览器显示的内容其实都是属于DOM节点树的,在浏览器看来,DOM节点树才是文档
动态创建标记不是在创建标记,而是在改变DOM节点树。
在DOM看来,一个文档就是一颗节点树。如果你想要从节点数上添加内容,就必须插入新的节点。如果你想添加一些标记到文档,就必须插入元素节点
createElement方法:创建元素节点(诸如<p>,<a>,<span>......)
格式:document.createElement("标签名");
新创建出来的标签已经存在了,但是还不属于任何一颗DOM节点数的组成部分,他只是在js世界的一个孤儿而已,称为:文档碎片(document fragment)
其nodeName=p,nodeType=1
createTextNode方法:创建文本节点(即添加标签内的内容)
格式:document.createTextNode("内容");
appendChild方法:连接(把游离在js世界的孤儿,加入到节点树,找到他的家)
格式:parent.appndChild(child);
有两个顺序方法:
1. 先创建标签,然后把标签追加到节点树种,再创建内容,把内容追加到标签后面
2. 见创建标签,在创建内容,把内容追加到标签里面,然后把标签再追加到节点树中
本人比较喜欢第二种写法,感觉思路会比较清晰
例子:在body里面添加一个p标签,在p里面创建一个em标签,内容是:<p>This is <em>my</em> content</p>;
特别提醒:使用appendChild属性插入文本内容不会把之前标签的内容覆盖掉,这个可以与innerHTML对比一下
从上面截图可以发现一个新的问题:<p>标签插在了<script>标签之后,因为插入的标签都是默认自动会排在所有子节点之后 这时我们需要新的方法来控制元素插入的位置;
元素插入位置设置:
insertBofore()方法:这个方法将把一个新元素插入到一个现有元素的前面;
格式:parentElement(目标元素的父元素).insertBefore(newElement(新元素),targetElement(目标元素))
介绍:parentNode:获取文档层次中的父对象
技巧:其实并不需要麻烦去找目标元素的父元素,可以利用parentNode,目标元素的父元素 = targetElement.parentNode
可惜的是:我们有一个insertBefore的方法,却没有一个insertAfter的方法;但是我们可以自己写一个insertAfter()函数来代替
insertAfter()函数:
思路:
- 判断目标元素是否是parent的最后一个元素,
- 如果是,则使用appenChild把新元素插在目标元素之后
- 如果不是,则使用insertBofore把新元素插在目标元素的下一个子元素之前。
介绍:nextSibling属性:表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。
JavaScript dom 动态创建标记的更多相关文章
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Dom 获取、Dom动态创建节点
一.Dom获取 1.全称:Document Object Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...
- 使用DOM动态创建标签
本文是参考<javascript Dom 编程艺术>第八章的内容所写,用到的知识点,就是关于创建平稳的web页面. 使用DOM方法: getElementById() getElement ...
- javascriptDOM编程艺术_学习笔记_知识点 动态创建标记
传统技术:document.write 和 innerHTML 深入剖析DOM方法:createElement.createTextNode.appendChild 和 insertBefore ...
- js入门之DOM动态创建数据
一. 知识点回顾 1. DOM结构 nodeName: '' 标签名 nodeType: '' 类型 1元素节点 2属性节点 3文本节点 nodeValue: '' 如果是元素节点 nodeValue ...
- 11-15 dom 动态创建节点
1.生成节点的方法 document.createElement(“div”) 2.插入节点的方法 父元素.appendChild(新节点) 在父节点中的子节点后面插入新的节点 3.在指定的位置 ...
- js 动态创建标记
innerHTML:一旦使用了这个属性,它的全部内容都要被替换掉.且不会返回任何对刚插入的内容的引用 与document.write()方法一样,innerHTML属性也是HTML专有属性,不能用于任 ...
- delphi dom动态创建节点方法
在一次测试demo中 需要动态的创建xml节点并添加,实现方法如下: var NewItem:IXMLDOMElement; NewItem:=ConfigDoc.createElement('ite ...
随机推荐
- 如何一步一步用DDD设计一个电商网站(三)—— 初涉核心域
一.前言 结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...
- Mysql事务探索及其在Django中的实践(一)
前言 很早就有想开始写博客的想法,一方面是对自己近期所学知识的一些总结.沉淀,方便以后对过去的知识进行梳理.追溯,一方面也希望能通过博客来认识更多相同技术圈的朋友.所幸近期通过了博客园的申请,那么今天 ...
- 基于改进人工蜂群算法的K均值聚类算法(附MATLAB版源代码)
其实一直以来也没有准备在园子里发这样的文章,相对来说,算法改进放在园子里还是会稍稍显得格格不入.但是最近邮箱收到的几封邮件让我觉得有必要通过我的博客把过去做过的东西分享出去更给更多需要的人.从论文刊登 ...
- Python 正则表达式入门(中级篇)
Python 正则表达式入门(中级篇) 初级篇链接:http://www.cnblogs.com/chuxiuhong/p/5885073.html 上一篇我们说在这一篇里,我们会介绍子表达式,向前向 ...
- Hibernate中事务声明
Hibernate中JDBC事务声明,在Hibernate配置文件中加入如下代码,不做声明Hibernate默认就是JDBC事务. 一个JDBC 不能跨越多个数据库. Hibernate中JTA事务声 ...
- canvas快速绘制圆形、三角形、矩形、多边形
想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...
- JavaScript作用域
JavaScript作用域 JavaScript作用域一直是前端开发的难题,现在只要用五句话就可解决. 一.“JavaScript中无块级作用域” 在Java或C#中存在块级作用域,即:大括号也是一个 ...
- BPM配置故事之案例10-获取外部数据
老李:Hi,小明,我又来了 小明:--这次又怎么了. 老李:之前的物资管理方式太混乱了,这段时间我整理了采购物资清单,现在都录入到我们的ERP中了,以后申请物资改成从ERP数据选择吧.物资明细表我也做 ...
- React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...
- 跟着老男孩教育学Python开发【第一篇】:初识Python
Python简介 Python前世今生 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...