JS创建HTML元素

在JavaScript 中，使用 document 对象的 createElement() 方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。用法如下：

其中，element 表示新建元素的引用，createElement() 是 document 对象的一个方法，该方法只有一个参数，用来指定创建元素的标签名称。

示例1

下面代码在当前文档中创建了一个段落标记 p，存储到变量 p 中。由于该变量表示一个元素节点，所以它的 nodeType 属性值等于 1，而 nodeName 属性值等于 p。

var p = document.createElement("p");  //创建段落元素
var info = "nodeName:" + p.nodeName;  //获取元素名称
info += ", nodeType:" + p.nodeType;  //获取元素类型，如果为1则表示元素节点
console.log(info);

使用 createElement() 方法创建的新元素不会被自动添加到文档里。如果要把这个元素添加到文档里，还需要使用 appendChild()、insertBefore() 或 replaceChild() 方法实现。

示例2

下面代码演示如何把新创建的 p 元素增加到 body 元素下。当元素被添加到文档树中，就会立即显示出来。

var p = document.createElement("p");  //创建段落元素
document.body.appendChild(p);  //增加段落元素到body元素下