文档章节

appendChild append innerHTML createElement createTextNode分析

 小狼狗007
发布于 2016/11/30 10:43
字数 562
阅读 14
收藏 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);......

zhangxinzx11
2011/10/17
172
5
jQuery 内存泄露追踪(附解决方案)

场景 异步回调,解析HTML,过滤出某一部分,加载到页面。 我的代码 html = $(html) ; 追踪 经查: jQuery在解析Html时,会有内存泄露。追踪的执行代码如下: 1. init: if (typeof selector =...

长平狐
2012/06/25
705
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
294
2

没有更多内容

加载失败,请刷新页面

加载更多

一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
44分钟前
0
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部