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. Ubuntu版本更替所引发的“血案”

    Ubuntu版本更替所引发的"血案"       今天,我兴致很高的装了双系统,并且配置了Linux的网络,接下来就是安装一些软件,来实现我想达到的功能了,结果被一个小小的命令卡的 ...

  2. 5.1 TLP的格式

    当处理器或者其他PCIe设备访问PCIe设备时,所传送的数据报文首先通过事务层被封装为一个或者多个TLP,之后才能通过PCIe总线的各个层次发送出去.TLP的基本格式如图5?1所示. 一个完整的TLP ...

  3. FusionCharts 2D环饼图

    1.静态页面 Doughnut.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  4. WIN2003+IIS6+FastCGI+PHP5.3的安装配置

    本文所用的软件的下载地址 fastcgi的下载地址:http://download.microsoft.com/download/E/0/C/E0C0709A-66E5-4113-9A6C-A5F65 ...

  5. Flex中的FusionCharts 3D饼图

    1.3D饼图设计源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns: ...

  6. freemarker报错之十一

    1.错误描述 六月 03, 2014 11:00:35 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...

  7. jquery.lazyload.js实现图片懒加载

    个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...

  8. python中的迭代器&&生成器&&装饰器

    迭代器iterator 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束. 迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外, ...

  9. .Net Core从命令行读取配置文件

    最近在学习博客园腾飞(jesse)的.Net Core视频教程,收益匪浅,在此作推荐 : http://video.jessetalk.cn/ 言归正传,.Net Core应用程序中如何通过命令行读取 ...

  10. Alice and Bob HDU - 4268

    Alice and Bob's game never ends. Today, they introduce a new game. In this game, both of them have N ...