WebAPI-创建、添加节点方法汇总

创建节点的方法

createElement()

document.createElement(nodeName) 通过指定的元素名称创建对应的元素并返回，该方法只是创建了元素并未将元素添加到页面中

• nodeName 字符串类型的标签名

// 创建了一个 div 元素
var tag = document.createElement('div')
// 打印
console.log(tag)

createTextNode()

document.createTextNode(text) 该方法用于创建一个文本节点并返回

• text 文本节点中的内容，是一个字符串；即使字符串中包含标签也会当作普通文本处理，不会进行解析

// 创建了一个文本节点
var tag = document.createTextNode('<div>div标签</div>')
// 打印
console.log(tag)

cloneNode()

node.cloneNode(deep) 该方法用于克隆指定的节点

• node 需要克隆的节点
• deep 是否进行深度克隆，该参数为布尔值；为 true 时该节点的所有后代节点也都会被克隆，如果为false 则只克隆该节点本身，默认为 false

<button id="btn">按钮</button>
<div id="box">
  <h3>h3标签