javascript – appendChild createElement

25-02-07 15

在这篇文章中，我们将为您详细介绍javascript–appendChildcreateElement的内容。此外，我们还会涉及一些关于appendChildappendinnerHTMLcreate

在这篇文章中，我们将为您详细介绍javascript – appendChild createElement的内容。此外，我们还会涉及一些关于appendChild append innerHTML createElement createTextNode分析、createElement与createDocumentFragment的点点区别小结_javascript技巧、document.createElement("A")比较不错的属性_javascript技巧、document.createElement()用法_javascript技巧的知识，以帮助您更全面地了解这个主题。

本文目录一览：

javascript – appendChild createElement
appendChild append innerHTML createElement createTextNode分析
createElement与createDocumentFragment的点点区别小结_javascript技巧
document.createElement("A")比较不错的属性_javascript技巧
document.createElement()用法_javascript技巧

javascript – appendChild createElement

有什么区别？

var div = document.createElement('div');//output -> [object HTMLdivelement]

document.getElementById('container').appendChild(div);

和

var div = '<div></div>';

document.getElementById('container').appendChild(div);//output -> <div></div>

不应该是一样的如果没有,我如何获得第二版的工作？

解决方法

稍后是元素的纯HTML,而第一个是对象.首先,您需要appendChild,而对于以后,您需要innerHTML.

shouldn’t both be the same? and if
not,how do i get the 2nd version to
work?

var div = '<div></div>';
document.getElementById('container').innerHTML = div;

appendChild append innerHTML createElement createTextNode分析

1.innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。(属于dom对象)，也可以插入Html对象例子： Firstname Lastname 输出 FirstnameLastname 2.append函数（JQuery）-一般函数都是JQuery中的有下面一段html代码：

Greetings

Hello

Goodbye

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

Test

'');//在OSC_h2_2">

Greetings

Hello

Test

Goodbye

Test

还可以把一个元素添加到另一个元素下面： $(''.container'').append($(''h2'')); //把h2添加到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。

createElement与createDocumentFragment的点点区别小结_javascript技巧

网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如：

复制代码代码如下:

var arrText=["1","2","3","4","5","6","7","8","9","10"];
for(var i=0;ivar op=document.createElement("P");
var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
document.body.appendChild(op);
}
var arrText=["1","2","3","4","5","6","7","8","9","10"];
var oFrag=document.createDocumentFragment();
for(var i=0;ivar op=document.createElement("P");
var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
oFrag.appendChild(op);
}
document.body.appendChild(oFrag);

（声明：这是我google的第一个例子，并不代表对原作者有任何意见，原文地址http://www.cnitblog.com/asfman/articles/32614.html）
这个说法并没有错，但是并不严谨，因为像这种用法，主要还是用在目标节点是已存在并且有一部分内容的情况下，比如上面例子中的body元素，如果目标节点并不存在或者为空，完全可以用createElement创建一个相同的元素，操作之后再使用一次appendChild或者replaceChild来达到相同的目的，这样也不存在重复刷新的问题。
虽说我平时都是把两者混着用，但是还是得明白两者之间的一点区别：
第一：
createElement创建的元素可以使用innerHTML，createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果，只是作为一个属性而已。两者的节点类型完全不同，并且createDocumentFragment创建的元素在文档中没有对应的标记，因此在页面上只能用js中访问到。
demo：

复制代码代码如下:

BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">