JS insertBefore(),插入DOM节点

insertBefore()方法

JavaScript中的insertBefor()方法,可以在调用对象中的某一个子节点之前插入一个DOM节点。


语法

parentNode.insertBefore(insertNode, childNode)

提示:parentNode为父节点,insertNode参数为需要插入的子节点,childNode为parentNode的子节点,insertNode即将插入到childNode之前。


insertBefore()实例代码,及在线编辑器

点击下方实例中的按钮,将在段落1前面添加一个文本节点(在这之前,需要先创建一个文本节点):

<div id='d'>
  <p id='p'>段落1</p>
  <p>段落2</p>
</div>
<button onclick='setTextNode()'>点击添加文本节点</button>
<script>
  function setTextNode(){
    var p = document.getElementById('p');
    var textNode = document.createTextNode('这是文本节点')
    var d = document.getElementById('d')
    d.insertBefore(textNode, p)
  }
</script>

全栈前端 / JavaScript语法 :





















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.