文档章节

appendChild append innerHTML createElement createTextNode分析

 小狼狗007
发布于 2016/11/30 10:43
字数 562
阅读 12
收藏 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
效率!效率!效率!

原文链接:http://blog.csdn.net/21aspnet/article/details/158847

晨曦之光
2012/03/09
40
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

7 个致命的 Linux 命令

导读 如果你是一个 Linux 新手,在好奇心的驱使下,可能会去尝试从各个渠道获得的命令。以下是 7 个致命的 Linux 命令,轻则使你的数据造成丢失,重则使你的系统造成瘫痪,所以,你应当竭力避...

问题终结者
今天
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
今天
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
今天
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
今天
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部