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. HDP2.0测试

    1.测试Hbase (1)hive导入hbase

  2. windows与虚拟机linux能ping通设置

    作为以后参考所用. 首先,介绍如何在VMWare中设置linux的网络.一般网络选项有Bridged,NAT,host-only几种,本次以host-only作详细说明,如下图: 在选择host-on ...

  3. 判断ios或者android

    <script type="text/javascript"> $(function () { // android和iso下载链接 var u = navigator ...

  4. alsa声卡分析alsa-utils调用过程

    如何分析tinyplay 播放音频和tinymix的过程?需要相应的工具来支持追查: 一.利用strace工具分析tinyplay和tinymix: strace -o tinyplay.log ti ...

  5. 大数据处理的三种框架：Storm，Spark和Samza

    许多分布式计算系统都可以实时或接近实时地处理大数据流.下面对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的图 ...

  6. Meet Python

    关于python 入门书<Head First Python>的一些读书笔记,用以备忘. 下载安装Python 下载地址: https://www.python.org/downloads ...

  7. ubuntu14.04 64位 安装Tomcat

    ubuntu14.04 64位 安装Tomcat 1 下载Tomcat 在htt://www.tomcat.apache.org官网上下载apache-tomcat-7.0.57.tar.gz 2 解 ...

  8. ORA-00904："T1"."AREA_ID" :标识符无效

    1.错误描述 ORA-00904:"T1"."AREA_ID" :标识符无效 00904 . 00000 - "%s:invalid identifi ...

  9. R语言实现对基因组SNV进行注释

    很多时候,我们需要对取出的SNV进行注释,这个时候可能会在R上进行注释,通常注释文件都含有Chr(染色体).Start(开始位点).End(结束位点).Description(描述),而我们的SNV文 ...

  10. ubuntu安装latex

    1 终端中输入"sudo apt-get install texlive-full",输入root密码. 若不想安装所有文件,可以选择"sudo apt-get inst ...