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. Jlink 烧写Uboot

    第一章 Hi3531_SDK_Vx.x.x.x版本升级操作说明 如果您是首次安装本SDK,请直接参看第2章. 第二章首次安装SDK 1.Hi3531 SDK包位置 在"Hi3531_V100 ...

  3. 给vmware的Linux虚拟机添加硬盘

    给vmware的Linux虚拟机添加硬盘   1.先将虚拟机Power Off,在Virtual Machine Setting对话框里点击左下角的"Add",选择"Ha ...

  4. 利用ffmpeg将H264流 解码为RGB

    利用H264解码分为几个步骤: 注意一点在添加头文件的时候要添加extern "C",不然会出现错误 [cpp] view plaincopy extern "C&quo ...

  5. 利用Eclipse中的Maven构建Web项目报错（一）

    利用Eclipse中的Maven构建Web项目 1.在进行上述操作时,pom.xml一直报错 <project xmlns="http://maven.apache.org/POM/4 ...

  6. HTML5中的输入框

    HTML5中的输入框 1.双引号 <input type="text"/> 2.单引号 <input type='text'/> 3.无引号 <inp ...

  7. phpstorm 2017.3.3的安装和破解

    首先先下载phpstorm安装包,可以直接百度phpstorm就有了,或者打开这个链接:https://www.jetbrains.com/zh/phpstorm/specials/phpstorm/ ...

  8. [USACO13NOV]没有找零No Change [TPLY]

    [USACO13NOV]没有找零No Change 题目链接 https://www.luogu.org/problemnew/show/3092 做题背景 FJ不是一个合格的消费者,不知法懂法用法, ...

  9. 【BZOJ2428】均分数据（模拟退火）

    [BZOJ2428]均分数据(模拟退火) 题面 BZOJ 题解 先说说黄学长的做法: 当温度比较高的时候,贪心 每次随机一个数,把他放进当前和最少的那一组里面 温度足够低的时候就完全随机然后转移 这样 ...

  10. 【UVa11426】GCD - Extreme (II)（莫比乌斯反演）

    [UVa11426]GCD - Extreme (II)(莫比乌斯反演) 题面 Vjudge 题解 这.. 直接套路的莫比乌斯反演 我连式子都不想写了 默认推到这里把.. 然后把\(ans\)写一下 ...