如何操作DOM之“新增”节点

上一篇文章,我们写了如何“查找”DOM节点,这里是时光机如何操作DOM树?——“查询”和如何操作 DOM 之“查找”。这里,我们来说一说如何往DOM树中“新增”一个节点

要想新增一个节点的话,我们首先要来创建一个节点。首先,我们来看看DOM节点总共分几种:

我们可以看到,在 DOM-3 中总共定义了12种节点类型,当然我们不用担心,把不适合HTML文档(在这里我们只专注于HTML)以及不常用到的节点除去后,就只有下面几个(红框内)。

createAttribute(name) 创建属性名称为 name 的“属性节点”。

createComment(data) 创建内容为 data 的"注释节点"。

createElement(tagName) 创建元素名称为 tagName 的"元素节点"。

createDocumentFragment() 创建一个空的"文档片段节点"。

createTextNode(data) 创建内容为 data 的"文本节点"

下面是应用以上接口方法的一个测试案例:

测试结果如下:

欢迎关注,我们在编程的路上,共同成长!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171215G00RTI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券