javascript：appendChild、insertBefore和insertAfter

sunnyxd 发布于2019-08-22 10:34 / 1830人阅读

摘要：作为的子节点插入最后的一子节点之后作为的子节点插入到节点之前为可选项参数，当为时其效果与一样顾名思义，就是在后面增加，但是没有现成的提供调用，但也很容易的自己可以写

appendChild：

target.appendChild(newChild)

newChild作为target的子节点插入最后的一子节点之后

insertBefore：

target.insertBefore(newChild,existingChild)

newChild作为target的子节点插入到existingChild节点之前

existingChild为可选项参数，当为null时其效果与appendChild一样
insertAfter:

顾名思义，就是在node后面增加new node，但是没有现成的API提供调用，但也很容易的自己可以写：

function insertAfter(newEl, targetEl)
{
    var parentEl = targetEl.parentNode;
            
    if(parentEl.lastChild == targetEl)
    {
       parentEl.appendChild(newEl);
    }else{
       parentEl.insertBefore(newEl,targetEl.nextSibling);
    }            
}

GPU云服务器云服务器 appendChild insertAfter insertBefore() insertBefore

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90868.html

【EASYDOM系列教程】之插入节点

摘要：值得注意的是如果我们是将页面中原有的节点插入到指定节点的子节点列表的最后面，那这个被插入的节点会先从原有的位置移除，再插入到指定的位置。 Node 对象提供了一些用于向 HTML 页面插入节点的方法，通过这些方法我们可以实现向 HTML 页面新增元素，或者移动 HTML 页面中的元素。 appendChild() 方法 Node 对象提供的 appendChild() 方法可以向指定节...

jk_v1 2019-08-20 18:23 评论0 收藏0
jQuery DOM节点的创建、插入、删除

摘要：通过方法添加的元素刚好相反，内容在方法前面，无论是一个选择器表达式或创建作为标记上的标记它都将被插入到目标容器的末尾。主要的不同是语法特别是插入内容和目标的位置。 DOM节点的创建 DOM创建节点及节点属性首先，介绍如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容创建流程：创建节点(常见的：元素、属性和文本)...

rainyang 2019-08-21 11:54 评论0 收藏0
dom没有insertAfter方法怎么办

摘要：代码没有方法，那么我们就自己定义一个的方法吧用到的方法属性属性方法方法属性函数有两个参数需要插入的元素节点目标节点到父级判断父级末尾节点末尾节点就是目标节点，那就简单多了，直接用末尾节点不是目标节点，用，并用找到目标节点阻止事件冒泡阻止冒泡 1代码 DOM 没有insertAfer()方法，那么我们就自己定义一个insertAfter()的方法吧！用到的DOM 方法：...

zhkai 2019-08-20 12:08 评论0 收藏0
不要过度依赖JQuery（一）

摘要：毫无疑问，是一款非常优秀的库，它让我们开发项目变得更加便捷容易。不过，当你准备在一个项目特别是移动项目中使用时，你真的该好好思考一下，你会用到的哪些功能，是否真的需要。毫无疑问，JQuery是一款非常优秀的JavaScript库，它让我们开发项目变得更加便捷容易。不过，当你准备在一个项目（特别是移动项目）中使用JQuery时，你真的该好好思考一下，你会用到JQuery的哪些功能，是...

ckllj 2019-08-20 13:51 评论0 收藏0
看Zepto如何实现增删改查DOM

摘要：先看下图，我们以删除元素，插入元素复制元素，包裹元素和替换元素几个模块分别探究如何一一将其实现。遍历当前集合中的元素，当该元素的父节点存在的时候，使用删除该元素。接下来我们来看如何将中创建好的节点插入到目标位置。前言 dom也就是文档对象模型，是针对HTML和XML的一个api，描绘了一个层次化的节点树。虽然浏览器原生给我们提供了许多操作dom的方法，使我们可以对dom进行查找，复制...

lookSomeone 2019-08-01 17:45 评论0 收藏0