js:appendChild、insertBefore和insertAfter

简介:

web/Win8开发中经常要在js中动态增加一些element,就需要用到下面的一些方法:

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);
       }            
}
复制代码

 本文转自老Zhan博客园博客,原文链接:http://www.cnblogs.com/mybkn/archive/2013/04/09/3011061.html,如需转载请自行联系原作者

相关文章
|
API
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
134 0
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
290 0
|
API
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
149 0
|
API
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
456 0
|
JavaScript
js拾遗:appendChild 添加移动节点
原文:js拾遗:appendChild 添加移动节点 写js一年多了,一直以为自己很牛逼,开始写各种博文分享,昨天写了一篇《浅谈 IE下innerHTML导致的问题》在看了下面的评论,我才发现自己是多么无知。
933 0
|
29天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2
|
25天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0