insertbefore的用法

insertbefore的用法

insertBefore()

insertBefore()用来在指定的DOM节点前插入DOM元素。

语法：

parentNode.insertBefore(newNode, existingNode);

parentNode为existingNode的父节点

existingNode为已经存在的节点

newNode为新插入的节点，插入到existingNode的前面

工具函数

上面原生方法，可能还需要父节点，我们可以进行简单的封装使用

function insertBefore(newNode, existingNode) {
  existingNode[xss_clean].insertBefore(newNode, existingNode);
}

例子

<ul id="menu">
  <li>产品</li>   
  <li>服务</li>
  <li>联系我</li>
</ul>
<script>
let menu = document.getElementById('menu');
// 创建一个新的li节点
let li = document.createElement('li');
li.textContent = '首页';
// 在第一个元素之前插入它
menu.insertBefore(li, menu.firstElementChild);
</script>

insertAfter()

JS DOM并没有insertAfter()这样一个方法，不过我们可以使用insertBefore()进行自己封装

工具函数

function insertAfter(newNode, existingNode) {
  existingNode[xss_clean].insertBefore(newNode, existingNode.nextSibling);
}

把existingNode的下一个兄弟节点作为参照元素，在其前面进行插入新节点

例子

<ul id="menu">
  <li>首页</li>   
  <li>服务</li>
  <li>联系我</li>
</ul>
<script>
let menu = document.getElementById('menu');
// 创建一个新的li节点
let li = document.createElement('li');
li.textContent = '产品';
// 在第一个元素之前插入它
menu.insertBefore(li, menu.firstElementChild.nextSibling);
</script>

本文地址：IT百科频道 https://www.hkm168.com/tags/917752.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！