JavaScript创建元素节点|Document createElement() 方法

由 hcduguo

Document 对象参考手册

定义与用法

createElement() 方法通过指定名称创建一个元素

语法格式

document.createElement( nodename)

示例代码

创建一个按钮:

var btn=document.createElement("BUTTON");

输出结果：

亲自试试

HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点。

创建指定文本的按钮：

var btn=document.createElement("BUTTON"); 
var t=document.createTextNode("CLICK ME"); 
btn.appendChild(t);

输出结果：

亲自试试

浏览器支持

方法Google ChromeInternet ExplorerFirefoxSafariOpera
createElement()YesYesYesYesYes

所有主要浏览器都支持 createElement() 方法

参数说明

参数类型描述
nodenameString必须。创建元素的名称。

返回值

类型描述
元素对象创建的元素节点

技术细节

DOM 版本Core Level 1 Document Object

createElement和createDocumentFragment区别

共同点：

  • 添加子元素后返回值都是新添加的子元素，因此，可利用innerHTML为createDocumentFragment添加子元素。
  • 都可以通过appendChild添加子元素，且子元素必须是node类型，不能为文本。
  • 若添加的子元素是文档中存在的元素，则通过appendChild在为其添加子元素时，会从文档中删除之前存在的元素。

区别：

  • createElement创建的是元素节点，createDocumentFragment创建的是文档碎片。
  • 通过createElement新建元素必须指定元素tagName,因为其可用innerHTML添加子元素。通过createDocumentFragment则不必。
  • 连续将通过createElement新建的元素添加到其他元素上，则只会将新建的元素添加到最后一个其他元素上。
  • 而连续将通过createDocumentFragment新建的元素通过appendChild添加到其他元素上，则只会将新建的元素添加到第一个其他元素上。
  • 通过createElement创建的元素是直接插入到文档中，而通过createDocumentFragment创建的元素插入到文档中的是他的子元素。
  • 通过createElement创建的元素插入文档后，还可以取到创建时的返回值，而createDocumentFragment创建的元素插入到文档后，就不能访问创建时的返回值了，相当于把自己创建的文档片段直接挪到文档中了。

Document 对象参考手册

相关