insertBefore() DOM方法应用

最新推荐文章于 2024-07-23 09:00:00 发布

小雨藏山

最新推荐文章于 2024-07-23 09:00:00 发布

阅读量428

点赞数 1

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44844866/article/details/116133199

版权

javascript 专栏收录该内容

25 篇文章

订阅专栏

作用：在指定子节点前插入另一个子节点

语法：父节点.insertBefore(插入的子节点,指定原有子节点)

由于是在指定的原有子节点前插入新的子节点，因此这个方法的调用者必须是一个父节点，因为所谓“原有的子节点”必须是相对父节点来说。如：

<ul class="web-nav" id='gw'>    <!--  父节点  -->
	<li><a href="#">公司官网</a></li>   <!--  子节点  -->
	<li><a href="#">帮助中心&nbsp∨</a></li>
	<li><a href="#">旗下产品&nbsp∨</a></li>
	<li><a href="#">网站导航&nbsp∨</a></li>
	<li><a href="#"><span>登录</span> &nbsp/&nbsp 注册 </a></li>
</ul>

对应JS代码：

var li005 = document.createElement('li');
li005.innerHTML = '广州';
var gw = document.getElementById('gw');
gw.insertBefore(li005,gw.firstElementChild);  //  调用者gw为父节点ul元素