<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <ul id="ele1">
        <li>11111111111111111111</li>
        <li id="li2">22222222222222222222</li>
        <li>33333333333333333333</li>
        <li>4444444444444444444</li>
        <li>5555555555555555555</li>
    </ul>
</body>
    <script type="text/ecmascript">
        //给元素添加节点
        var ele = document.getElementById('ele1');
        //创建li元素和文本内容
        var oLi = document.createElement('li');
        var oText = document.createTextNode('今天由我主持晨会呵呵');
        //appendChild将子节点加到当前节点的后面
        oLi.appendChild(oText);
        //定义一个新节点和一个老节点
        function inserAfter(newEle, oldEle) {
            var next = oldEle.nextSibling;
            //判断节点后面是否有弟弟节点
          
            if (next) {
                //如果有弟弟节点
                next.parentNode.insertBefore(newEle, next);
            } else {
                //如果没有弟弟节点
                oldEle.parentNode.appendChild(newEle);
            }

}
        var oLi2 = document.getElementById("li2");
        inserAfter(oLi, oLi2);

</script>
</html>

DOM节点-appendChild的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  3. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  4. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  5. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  6. JS中级 - 01：DOM节点

    1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...

  7. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  8. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  9. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

随机推荐

  1. Simulating a Fetch robot in Gazebo

    Installation Before installing the simulation environment, make sure your desktop is setup with a st ...

  2. cocos2d-x 3.X （二）创建动起来的精灵

    [参考文章]http://www.cnblogs.com/suguoqiang/archive/2013/04/03/2997316.html 在HelloWorldScene.h中声明void ro ...

  3. NTFS reparse point

    https://en.wikipedia.org/wiki/NTFS_reparse_point NTFS HARD link: since Windows NT4: files on the sam ...

  4. cublas相关的知识

    下面链接给出了一个例子,怎么用cublas进行矩阵的运算提速,也说明了cublas的大致的使用方法. http://www.cnblogs.com/scut-fm/p/3756242.html cub ...

  5. activity去标题栏操作&保留高版本主题

    方式一:每个类都需要去添加此代码 在setContentView(R.layout.activity_splash); 前设置以下代码 requestWindowFeature(Window.FEAT ...

  6. pod JONSKit.h MBProgress.h 找不到头文件，怎么办？

    这时你看项目pod部分,多了JSONKit库.好了,第三方库就这么神奇的加进来. 头文件路径 那试试看使用JONSKit.h,在ViewController.m里引用下.找不到头文件,怎么办?还没设置 ...

  7. mysql报关于用户密码1045(28000)，几种处理方法 (zhuan)

    http://blog.itpub.net/29371470/viewspace-1409075/ http://blog.csdn.net/rosten/article/details/250658 ...

  8. 转！JNDI 是什么？

    JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的意义和作用,就没有 ...

  9. LinuxShell脚本攻略--第一章 小试牛刀

    使用 shell 进行数学运算: #!/bin/bash no1=; no2=; let result=no1+no2 echo $result result=$[ $no1 + no2 ] resu ...

  10. WEB网页插件 如何实现 选择上传图片路径 【高级问题】

    发表于 2010-10-22 12:11 | |只看楼主       按键精灵程序里面的WEB网页插件 如何实现 选择上传图片路径 我想在上传图片的选框设置图片路径为 C:\fakepath\001. ...