<!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. 字段符号FIELD-SYMBOLS

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

  2. Python基础学习笔记（五）常用字符串内建函数

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-strings.html 3. http://www.liaoxu ...

  3. HDU1045 Fire Net（DFS）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1045 Fire Net Time Limit: 2000/1000 MS (Java/Others)  ...

  4. git-github-svn你们都是个什么东东

    Git 和 GitHub 有什么区别  百科中是这样说的 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. GitHub 是一个面向开源及私有软件项目的托管平台,因为 ...

  5. 领域驱动设计系列文章——浅析VO、DTO、DO、PO的概念、区别和用处

    本篇文章主要讨论一下我们经常会用到的一些对象:VO.DTO.DO和PO. 由于不同的项目和开发人员有不同的命名习惯,这里我首先对上述的概念进行一个简单描述,名字只是个标识,我们重点关注其概念: 概念: ...

  6. 《易货》Alpha版本发布说明

    一.引言 本说明描述了校淘1.0版本的已经实现的主要功能,对运行环境的要求,以及目前软件所具有的一些问题和限制. 二.主要功能 本软件面向的是在校大学生,方便大学生将自己闲置的物品以二手商品的形式发布 ...

  7. iOS - UITabBarController

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBarController : UIViewController <UITabBarDelegate ...

  8. [转载] 跟着实例学习zookeeper 的用法

    原文: http://ifeve.com/zookeeper-curato-framework/ zookeeper 的原生客户端库过于底层, 用户为了使用 zookeeper需要编写大量的代码, 为 ...

  9. mysql与mysqld

    mysql是客户机/服务器的结构. mysql是客户端行工具,连接mysqld服务,执行sql命令,可认为客户端sdk mysqld 启动mysql数据库服务. 脚本启动mysql服务的命令是 net ...

  10. Java中List Set Map 是否有序等总结

    1.Collection List Set Map 区别记忆 这些都代表了Java中的集合,这里主要从其元素是否有序,是否可重复来进行区别记忆,以便恰当地使用,当然还存在同步方面的差异,见上一篇相关文 ...