javascript insertAfter()定义与用法示例

本文实例讲述了javascript insertAfter()定义与用法。分享给大家供大家参考，具体如下：

HTML部分：

<div id="b">bbbbbbbbb</div>
<div>dddddd</div>

JavaScript部分:

window.onload=function(){
  var a =document.createElement("span");
  var b =document.createTextNode("cssrain");
  a.appendChild(b);
  var mubiao = document.getElementById("b");
  insertAfter(a,mubiao);
}
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
   if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素，则直接添加。因为默认是最后
    parent.appendChild(newElement);
   } else {
    parent.insertBefore(newElement,targetElement.nextSibling);//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。
   }
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript常用函数技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js AppendChild与insertBefore用法详细对比

    我们知道appendChild和insertBefore都有插入节点的功能.但在应用上,这两者之间还是有一些区别的. 比如我们要在下面这个div中插入一个子节点P时: <div id="test"><p id="x1">Node</p><p>Node</p></div> 我们可以这样写(测试某种情况时请将另外一种注释): 复制代码 代码如下: <script type="text

  • 初学js插入节点appendChild insertBefore使用方法

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点.语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同. appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说). insertBefore 方法 是在已有的节点前

  • Javascript insertAfter() 实现函数代码

    复制代码 代码如下: //DOM没有提供insertAfter()方法 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { // 如果最后的节点是目标元素,则直接添加.因为默认是最后 parent.appendChild(newElement); } else { parent.insertB

  • JavaScript之appendChild、insertBefore和insertAfter使用说明

    appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法 target.appen

  • js中AppendChild与insertBefore的用法详细解析

    appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法target.appendChil

  • js动态添加表格数据使用insertRow和insertCell实现

    js动态添加表格数据使用insertRow和insertCell实现

    效果图: 代码: js动态添加表格数据_2.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态添加表格数据_2

  • js利用Array.splice实现Array的insert/remove

    arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]]) 参数 arrayObj 必选项.一个 Array 对象. start 必选项.指定从数组中移除元素的开始位置,这个位置是从 0 开始计算的. deleteCount 必选项.要移除的元素的个数. item1, item2,. . .,itemN 必选项.要在所移除元素的位置上插入的新元素. 说明 splice 方法可以移除从 start 位置开始的指定个

  • js在指定位置增加节点函数insertBefore()用法实例

    本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodeli = document.createElement('li');//创建一个li节

  • javascript insertAfter()定义与用法示例

    本文实例讲述了javascript insertAfter()定义与用法.分享给大家供大家参考,具体如下: HTML部分: <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript部分: window.onload=function(){ var a =document.createElement("span"); var b =document.createTe

  • javascript递归函数定义和用法示例分析

    递归函数:是指函数直接或间接调用函数本身,则称该函数为递归函数. 这句话理解起来并不难,从概念上出发,给出以下的例子: function foo(){ console.log("函数 foo 是递归函数."); foo(); } 这个例子的 foo 函数就是一个递归函数. 当你把这个函数拿到浏览器上运行的时候,你会发现内存溢出了,为什么呢?因为这个递归函数没有停止处理或运算的出口,因此这个递归函数就演变为一个死循环. 那如何使用递归呢? 使用递归函数必须要符合两个条件: 1. 在每一次

  • Android编程图片操作类定义与用法示例【拍照，相册选图及裁剪】

    本文实例讲述了Android编程图片操作类定义与用法.分享给大家供大家参考,具体如下: 主界面类:拍照及选择相册图片 import android.app.Activity; import android.content.Intent; import android.graphics.Bitmap; import android.net.Uri; import android.os.Bundle; import android.provider.MediaStore; import androi

  • JavaScript继承定义与用法实践分析

    本文实例讲述了JavaScript继承定义与用法.分享给大家供大家参考,具体如下: javascript 继承 , 老生长谈的东西, 大家应该都很熟悉了, 平时工作基本不会直接使用, 这段时间不忙, 所以补习了下相关基础知识 ,自己动手实践, 加深理解: 基类定义如下: // base class function Animal(t) { if(typeof t==='string') this.type=t; else { if(t) this.type=t.toString(); else

  • JavaScript递归函数定义与用法实例分析

    本文实例讲述了JavaScript递归函数定义与用法.分享给大家供大家参考,具体如下: 递归函数是一个函数通过名字调用自身的情况下形成的,比如经典的递归阶乘函数: function factorial(num) { if (num <= 1) { return 1; } else { return num * factorial(num - 1); } } 上面的这种写法,可能会造成问题: var anotherFactorial = factorial; factorial = null; c

  • JavaScript日期工具类DateUtils定义与用法示例

    JavaScript日期工具类DateUtils定义与用法示例

    本文实例讲述了JavaScript日期工具类DateUtils定义与用法.分享给大家供大家参考,具体如下: DateUtils = { patterns: { PATTERN_ERA: 'G', //Era 标志符 Era strings. For example: "AD" and "BC" PATTERN_YEAR: 'y', //年 PATTERN_MONTH: 'M', //月份 PATTERN_DAY_OF_MONTH: 'd', //月份的天数 PATT

  • CI框架(CodeIgniter)公共模型类定义与用法示例

    本文实例讲述了CI框架(CodeIgniter)公共模型类定义与用法.分享给大家供大家参考,具体如下: 我们都知道,操作数据库的方法都写在模型中.但是一般情况下,一张表往往至少对应4个操作,也就是所谓crud.那么如果20张表,所对应的模型方法,就达到了80个,重复的操作显然这已经是一个体力活儿. 那么就对单表操作时,我们进行一下简单的封装.如下是ci框架的示例: <?php /** * Created by PhpStorm. * User: kangjianrong * Date: 16-8

  • JS前向后瞻正则表达式定义与用法示例

    本文实例讲述了JS前向后瞻正则表达式定义与用法.分享给大家供大家参考,具体如下: 定义 x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找. 比如,/Jack(?=Sprat)/会匹配到'Jack'仅仅当它后面跟着'Sprat'./Jack(?=Sprat|Frost)/匹配'Jack'仅仅当它后面跟着'Sprat'或者是'Frost'.但是'Sprat'和'Frost'都不是匹配结果的一部分. x(?!y) 匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找.

  • Java数据结构之稀疏矩阵定义与用法示例

    本文实例讲述了Java数据结构之稀疏矩阵定义与用法.分享给大家供大家参考,具体如下: 稀疏矩阵非零元素的三元组类: package com.clarck.datastructure.matrix; /** * 稀疏矩阵的压缩存储 * * 稀疏矩阵非零元素的三元组类 * * @author clarck * */ public class Triple implements Comparable<Triple> { // 行号,列号, 元素值,默认访问权限 int row, colum, val

  • PHP双向链表定义与用法示例

    本文实例讲述了PHP双向链表定义与用法.分享给大家供大家参考,具体如下: 由于需要对一组数据多次进行移动操作,所以写个双向链表.但对php实在不熟悉,虽然测试各个方法没啥问题,就是不知道php语言深层的这些指针和unset有什么注意的地方,贴出来让大家教育吧.效率没测试....求谅解- <?php /** * **双向链表 * @author zhiyuan12@ */ /** * 链表元素结点类 */ class Node_Element { public $pre = NULL; // 前驱

随机推荐