js之appendChild、insertBefore和insertAfter

最新推荐文章于 2024-07-21 09:19:08 发布

野草_yh

最新推荐文章于 2024-07-21 09:19:08 发布

阅读量1.9k

点赞数 5

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_56812391/article/details/128607843

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇文章介绍了DOM中的两个重要方法：appendChild用于在元素末尾添加子节点，而insertBefore则允许在指定子节点前插入新节点。由于DOM标准中没有insertAfter方法，文章提供了一个自定义实现来在指定节点之后插入新节点。

摘要由CSDN通过智能技术生成

一、定义

appendChild：插入一个子节点

insertBefore：在指定元素之前插入一个子节点

insertAfter：在指定元素后插入一个子节点

二、用法

appendChild

Element.appendChild(newChild)

newChild：插入的节点

在父元素Element插入一个子节点newChild

insertBefore

Element.insertBefore(newChild，Child)

        newChild：插入的节点

        Child：插入在此节点之前，可选参数(为空时此方法类似appendChild），另外火狐这个值不能为空，应该传个null进去。

        在父元素Element插入一个子节点newChild，该子节点位于Child的前面

insertAfter

没有这个方法，我们可以自己写

function insertAfter(newnode,child){
    //获取目标节点的父节点
	var parent = child.parentNode;
	if(parent.lastChild == child){
	    parent.appendChid(newnode);
	}else{
	    parent.insertBefore(newnode,child.nextSibling);
	//nextSibling：下一个兄弟元素节点
	}
}