文档章节

appendChild append innerHTML createElement createTextNode分析

 小狼狗007
发布于 2016/11/30 10:43
字数 562
阅读 15
收藏 0
1.innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。(属于dom对象),也可以插入Html对象 例子: Firstname Lastname 输出 FirstnameLastname 2.append函数(JQuery)-一般函数都是JQuery中的 有下面一段html代码:

Greetings

Hello
Goodbye
然后通过一行代码可以得到下面的代码: $('.inner').append('

Test

');//在class="inner“内部添加p //下面是得到的结果:

Greetings

Hello

Test

Goodbye

Test

还可以把一个元素添加到另一个元素下面: $('.container').append($('h2')); //把h2添加到class="container” //下面是结果:
Hello
Goodbye

Greetings

3.createTextNode为创建文本节点,createElement为创建一个元素标签,appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。通常这3者都会在一起使用,在body中添加新的元素 例子:var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element); 如果两个文本节点是相邻的同胞节点,那么这两个节点中的文本就会连起来显示,中间不会有空格。 4.appendHtml和innerHTML用法差不多,区别如下: (1)在执行速度的比较上,使用appendChild比innerHTML要快,特别是内容包括html标记时,appendChild明显要快于innerHTML,这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上,当包含html标记过多时,innerHTML速度会明显变慢。 (2)如果appendChild的参数是页面存在的一个元素,则执行后原来的元素会被移除,如document.getElement("a").appendChild(document.getElementByIdx("b")),执行后,b元素会先被移除,然后再添加到a中。 (3)通过appendChild添加到的是dom对象,返回的也是dom对象,可以通过dom对象访问获取元素的各种属性,而innerHTML则是纯字符串,不能获取内部元素的属性。这也是执行速度差异的主要原因 (4)、在使用上innerHTML比appendChild要方便,特别是创建的节点属性多,同时还包含文本的时候。 因此在使用时如果数据量较大且对性能有所要求时,还是应该使用appendChild。

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 7
码字总数 2214
作品 0
荆州
私信 提问
原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考。 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元...

黄金林
2016/12/21
3
0
python生成xml文件存储

from xml.dom import minidom doc = minidom.Document() doc.appendChild(doc.createComment("This is a simple xml.")) booklist = doc.createElement("booklist") doc.appendChild(booklis......

tinydot
2016/09/19
90
0
PHP生成时,子元素的创建

createElement("ProgramExportRequest"); $dom->appendChild($root); $SourceModuleID = $dom->createElement("SourceModuleID"); $root->appendChild($SourceModuleID); $text = $dom->crea......

zhangxinzx11
2011/10/17
183
5
[JavaScript]使用document.createDocumentFragment优化性能

如果对客户端动态交互要求比较高,在DOM里需要频繁动态增加元素,那么可能会遇到性能问题,那么就有可能用到DocumentFragment了,具体看看下面的例子,性能差别还是挺大的。

吞吞吐吐的
2017/09/07
0
0
关于saveXML()的问题,我用zend framework soap 生成wsdl文件 在源码中看到这个函数于是自己试验了一没有输出结果,请高手指点

$doc = new DOMDocument('1.0'); // we want a nice output $doc->formatOutput = true; $root = $doc->createElement('book'); $root = $doc->appendChild($root); $title = $doc->createEl......

落枫眠
2012/01/10
322
2

没有更多内容

加载失败,请刷新页面

加载更多

jdk8-64

https://pan.baidu.com/s/1sunIF-dBeyDKjFEpuYFyTQ 密码:jhuj

默克鱼
8分钟前
0
0
CentOS 7 网络设置及静态IP配置

一、 CentOS 7 网络设置 使用 CentOS 7 NetInstall(最小安装盘)安装的CentOS默认是没有配置网络的,可以使用 ping 试一下,结果肯定是不能执行的,ping 指定ip不通是没有网络,ping域名不通是...

calmsnow
12分钟前
0
0
前端未来几年的路该怎么走?

在知乎上看到这么一个问题,觉得很有意思,以下是原提问者的见解 过去五年前端的发展过程基本上是一个工程化的过程,框架和工程化工具层出不穷。 近两年其实发展已经比较迟滞了。 框架方面:基...

前端攻城小牛
13分钟前
0
0
LIst的逆向遍历

public class list_demo { public static void main(String[] args) {// TODO Auto-generated method stub List list=new ArrayList<>(); list.add("a"); list.add("b");......

南桥北木
56分钟前
3
0
MySQL插入性能优化

MySQL插入性能优化 标签: 博客 [TOC] 可以从如下几个方面优化MySQL的插入性能。 代码优化 values 多个 即拼接成一个insert values sql, 例如 INSERT INTO MyTable ( Column1, Column2, Co...

蒋先生66
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部