appendChild append innerHTML createElement createTextNode分析

2019独角兽企业重金招聘Python工程师标准>>>

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。

转载于:https://my.oschina.net/huangjing1992/blog/796575