1、createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称

var a=document.getElementsByClassName('name1')[0];

var d=document.createAttribute('div');//创建

　　a.setAttributeNode(d);//添加

　　a.setAttribute('div','100')//设置

2、　createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容

var a=document.getElementsByClassName('name1')[0];

var d=document.createTextNode('div');//创建

　　a.appendChild(d)//添加　

3、createElement() 创建一个元素节点 => 接收参数为string类型的nodename

var a=document.getElementsByClassName('name1')[0];

var d=document.createElement('div');//创建

	a.appendChild(d)//添加

4、createComment()创建一个注释节点 => 接收参数为string类型的注释文本

var a=document.getElementsByClassName('name1')[0];

var d=document.createComment('div');//创建

	a.appendChild(d)//添加

5、DocumentFragment()

创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。

DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 
另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升

ps:使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。

<body>

	<ul>

		<li>Alice</li>

		<li>Bob</li>

	</ul>

	<button onclick="test()">测试</button>

</body>

<script type="text/javascript">

	function test() {

		var li =document.getElementsByTagName('li')[0]; //ul中的第一个li节点

		var newFrag = document.createDocumentFragment();

		newFrag.appendChild(li);

		newFrag.childNodes[0].childNodes[0].nodeValue = 'Candy';//获取子节点的text并修改

		document.getElementsByTagName('ul')[0].appendChild(newFrag);

		}

</script>

　

只能操作一次
var p = document.createElement('p');

 p.innerHTML = '测试DocumentFragment';

 var fragment = document.createDocumentFragment();

 fragment.appendChild(p);

fragment.innerHTML = '<p>测试DocumentFragment</p>';

fragment.innerHTML = '<span>测试DocumentFragfffffment</span>';//只能操作一次

 document.body.appendChild(fragment);

　　

DOM节点的创建的更多相关文章

  1. DOM节点的创建、插入、删除、查找、替换

    在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作. 一.创建DOM节点 使用的命令是 var oDiv = document.createElem ...

  2. DOM节点的创建、插入、删除

    值得注意的是:节点的创建.插入以及删除都是操作父级容器.(1)创建var newDiv = documnet.createElement('div'); ——创建的元素只能操作一次 (2)插入/追加a ...

  3. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  4. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  5. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  6. JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  7. javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...

  8. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  9. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

随机推荐

  1. Oracle trunc() 函数处理数字、日期的整理

    --Oracle trunc()函数的用法/**************日期********************/1.select trunc(sysdate) from dual --2013- ...

  2. linux lnmp搭建及解释

    lnmp的搭建linux nginx mysql(mariaDB) php 安装mysql依赖:yum -y install cmake(cmake编译工具)yum -y install gcc gc ...

  3. RMAN还原时注意set newname时文件名不要有空格

      今天遇到一个非常奇怪的现象,查看ORACLE数据库的一个文件,明明这个文件是存在的,但是使用ls -lrt 查看都显示这个文件不存在.很是纳闷! 后面发现在终端输入文件名后并使用tab键时,发现文 ...

  4. vscode格式化Vue出现的问题

    一.VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 本来就是简写比较方便舒服,结果一个格式化回到解放前 最后找到问题原因: 首先,vetur默认设置是这个样的.也就是 ...

  5. 芝麻HTTP：

    只要你的Scrapy Field字段名字和 数据库字段的名字 一样.那么恭喜你你就可以拷贝这段SQL拼接脚本.进行MySQL入库处理. 具体拼接代码如下: def process_item(self, ...

  6. Windows系统还原失败心得

    最近我的Windows10连续几天出现了蓝屏,怀疑是某软件的Bug造成的,于是想用系统还原功能回到前一段时间,我找到了那款软件安装的时间. 到了选择还原点界面,发现有5个还原点,最旧的一个刚好就是那款 ...

  7. ssm整合快速入门程序(三)之Data类型转换器

    今天就写写springmvc配置Data类型转换器 首先在创建一个转换器的包cn.my.ssm.controller.converter,创建一个CustomDateConverter类实现Conve ...

  8. 【BZOJ1975】【SDOI2010】魔法猪学院（搜索，A*，贪心）

    我已经沉迷于粘贴题目地址了... 题解 很显然的贪心呀, 就是一定是最短的若干条路径的长度 所以,不断拓展k短路就可以了 至于怎么用A* 评估函数f(x)=dis[x]+g[x] 其中,dis是到N号 ...

  9. vultr VPS的购买及搭建ss介绍，支持锐速加速优化

    Vultr虽然成立时间不久,但是其背景实力还是比较雄厚的,基于全球最大的游戏服务器提供商之一的基础,所以才有实力开设这么多的数据中心.有速度较好的日本东京.洛杉矶等机房,也有我们很多人需要的欧洲机房等 ...

  10. java支付宝开发-02-手机网站支付

    源码已上传github,欢迎专注:https://github.com/shirayner/alipay-wap 一.基础部分 1.手机网站支付产品介绍 1.1 阅读官方介绍: 手机网站支付产品介绍 ...