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

谁借莪１个温暖的怀抱￠ 2023-06-13 09:43 74阅读 0赞

## 创建节点的方法 ##

#### createElement() ####

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

*  `nodeName` 字符串类型的标签名

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

![在这里插入图片描述][20191118154119577.png]

#### createTextNode() ####

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

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

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

![在这里插入图片描述][2019111815420192.png]

#### cloneNode() ####

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

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

![在这里插入图片描述][20191118182946835.gif]

## 插入节点的方法 ##

#### appendChild() ####

`parentNode.appendChild(node)` 用于向指定节点的子节点列表末尾添加新的子节点（追加节点，就像数组方法中的 push() 方法）；返回值为添加的节点

*  `parentNode` 需要添加子节点的节点（父节点）
 *  `node` 需要添加的节点（子节点）

<button id="btn">按钮</button>
    <div id="box">
      <h3>h3标签</h3>
      <p>p标签</p>
    </div>
    
    <script type="text/javascript"> function $(id) { return document.getElementById(id) } $('btn').onclick = function() { var box = $('box') // 创建节点 var h5 = document.createElement('h5') h5.innerHTML = 'h5标签' // 追加节点 var node = box.appendChild(h5) // 打印 console.log(node) } </script>

![在这里插入图片描述][20191118191450506.gif]

#### insertBefore() ####

`parentNode.insertBefore(newNode, referenceNode)` 在参考节点之前插入一个拥有指定父节点的子节点；返回值为插入的节点

*  `parentNode` 指定的父节点
 *  `newNode` 用于插入的节点
 *  `referenceNode` 父节点中用于参考的子节点

<button id="btn">按钮</button>
    <div id="box">
      <h3>h3标签</h3>
      <p>p标签</p>
    </div>
    
    <script type="text/javascript"> function $(id) { return document.getElementById(id) } $('btn').onclick = function() { var box = $('box') // 创建节点 var h5 = document.createElement('h5') h5.innerHTML = 'h5标签' // 在指定元素前插入新节点 var node = box.insertBefore(h5, box.children[1]) // 在 box 的第二个子元素前插入节点 // 打印 console.log(node) } </script>

![在这里插入图片描述][20191118192852112.gif]

[20191118154119577.png]: https://img-blog.csdnimg.cn/20191118154119577.png
[2019111815420192.png]: https://img-blog.csdnimg.cn/2019111815420192.png
[20191118182946835.gif]: https://img-blog.csdnimg.cn/20191118182946835.gif
[20191118191450506.gif]: https://img-blog.csdnimg.cn/20191118191450506.gif
[20191118192852112.gif]: https://img-blog.csdnimg.cn/20191118192852112.gif