首页 > 编程笔记 > JavaScript笔记 阅读:737

JS创建HTML元素

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

var element = document.getElement("tagName");

其中,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元素下

爱面试的程序媛,一个分享面试经验的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,定时分享程序员面试的那点事。

面试如何造火箭?工作如何拧螺丝?都在这个公号哦。

扫描二维码关注公众号,免费领取价值 1000 元的求职面试资料(限时免费)!

当你决定关注「爱面试的程序媛」,你已然超越了90%的程序员!

爱面试的程序媛二维码
微信扫描二维码关注

所有教程

优秀文章