<!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. ABAP断点调试

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. ALV详解：Function ALV（二）

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. jQuery 中的children()和 find() 的区别

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  4. tiled工具使用

    转的 在这个分为上下两部分的教程中,我们将介绍如何使用Cocos2D-X和地图编辑器做一款基于地图块的游戏.在这个简单的地图块游戏里,一个精灵将在沙漠里搜寻它可口的西瓜! 在教程的第一部分,我们将介绍 ...

  5. Nginx基础知识之————什么是 Nginx？

    本课时主要给大家讲解什么是 Nginx 和 Nginx 的功能,Nginx 与其他服务器的性能比较和 Nginx 的优点总结的知识,并结合实例让学员深入理解 Nginx 和 Nginx 的功能以及 N ...

  6. redis问题

    phalcon 在读取数据的时候如果说reids数据库没有连接成功的话,则会显示一下错误:

  7. Nginx 的RTMP打流模块配置

    config配置文件: user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; ev ...

  8. Android图形显示之硬件抽象层Gralloc（hal 转）

    原文  http://blog.csdn.net/yangwen123/article/details/12192401 FrameBuffer驱动程序分析 文中介绍了Linux系统下的显示驱动框架, ...

  9. mysql delimiter

    默认情况下,mysql遇到分号; 就认为是一个命令的终止符, 就会执行命令.而有些时候,我们不希望这样,比如存储过程中包含多个语句,这些语句以分号分割,我们希望这些语句作为一个命令,一起执行,怎么解决 ...

  10. JavaWeb学习总结（十五）--过滤器的应用

    一.解决全站字符乱码(post和get中文编码问题) 乱码问题: 获取请求参数中的乱码问题: POST请求:request.setCharacterEncoding("utf-8" ...