如何创建自定义的HTML元素_IT百科

可以使用document.registerElement()函数用来创建自定义的HTML元素。

它将返回一个构造函数，其中有一个参数选项，用来声明自定义HTML元素的名称，另外有一个可选参数项，用来描述原型的对象，自定义功能的元素。

在下面的示例中，简单的创建了一个新的HTML元素<x-treehouse>，并且将它放入到页面中：

var XTreehouseElement = document.registerElement('x-treehouse')

document.body.appendChild(new XTreehouseElement())

下面的HTML就会插入<body>元素内：

<x-treehouse></x-treehouse>

自定义元素的名称必须使用连字符-，这样浏览器就可以区分标准元素和自定义元素。

这段代码创建新的<p>元素：

var para=document.createElement("p")

如需向 <p>元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。")

然后您必须向 <p>元素追加这个文本节点：

para.appendChild(node)

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1")

以下代码在已存在的元素后添加新元素：

element.appendChild(para)

欢迎分享，转载请注明来源：内存溢出

如何创建自定义的HTML元素