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. 【前端】Vue2全家桶案例《看漫画》之一、添加四个导航页

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_1.html 项目github地址:https://github.com/shamoyuu/ ...

  2. 【前端】Angular2 Ionic2 学习记录

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/angular2_ionic2.html 一.建立项目 ionic start ProductName super ...

  3. java中的mvc和三层结构究竟是什么关系

    一件事,要知其然往往很简单,要知其所以然通常不是那么容易,就如最近重新巩固spring的过程中,就觉得还有许多问题其实并不是十分明了. 屈指一算,手头上做过的正式项目也有了四五六七个了,不管用的数据库 ...

  4. directdraw显示rgb555

    // TODO: 在此添加控件通知处理程序代码  height=width=widthBytes=0;  m_screen.SetWindowPos(&CWnd::wndBottom,0,0, ...

  5. 【mysql】mysql内置函数

    mysql常用内置函数 1.mysql字符串函数 contact 字符串连接函数 mysql>select contact("he",'llo');# hello lcase ...

  6. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  7. RAPIDIO高速串行协议

    RapidIO是由Motorola和Mercury等公司率先倡导的一种高性能. 低引脚数. 基于数据包交换的互连体系结构,是为满足和未来高性能嵌入式系统需求而设计的一种开放式互连技术标准.RapidI ...

  8. winhex中判断+MBR+DBR+EBR方法

    [/hide] 扇区开始描述). 用 winhex 做U盘免疫AUTO.INF 用WinHex制作无法修改的AutoRun.inf文件 在我们日常工作中,经常需要使用闪存(也称为U盘或者优盘)主要是A ...

  9. 从“跳一跳”来看微信小程序的未来

    从“跳一跳”来看微信小程序的未来   相信大家这两天都被微信新推出的小程序跳一跳刷爆了朋友圈,为了方便用户在使用过程中切换小程序,微信在这次6.6.1版本中加入了下拉可快速切换小程序的功能,而“跳一跳 ...

  10. C#接口--C#基础

    1.接口的声明 接口:描述属于任何类或者结构的一组相关功能,是一种规范.功能 组成:属性.方法.事件.索引或者这四种成员的任意组合构成 基本知识点: 1)接口默认的权限修饰符是:public,不允许加 ...