<!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. CUBRID学习笔记 41 sql语法之select

    cubrid的中sql查询语法 SELECT [ ] [{TO | INTO} ][FROM ] [WHERE ][GROUP BY {col_name | expr} [ASC | DESC], . ...

  2. CUBRID学习笔记 26 数据类型3cubrid教程

    接上面的集合 集合之 set 每个集合元素是不同的值, 但是类型只能是一种.也可以有其他表的记录 如下 CREATE TABLE set_tbl ( col_1 set(CHAR(1))); INSE ...

  3. hdu 2199 （二分）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=2199 Can you solve this equation? Time Limit: 2000/1000 ...

  4. 在SQL Server中 获取日期、日期格式转换

    --常用日期转换参数: PRINT CONVERT(varchar, getdate(), 120 ) 2016-07-20 16:09:01 PRINT replace(replace(replac ...

  5. 详解 ASP.NET异步

    在前文中,介绍了.NET下的多种异步的形式,在WEB程序中,天生就是多线程的,因此使用异步应该更为谨慎.本文将着重展开ASP.NET中的异步. [注意]本文中提到的异步指的是服务器端异步,而非客户端异 ...

  6. MVC 3 数据验证 Model Validation 详解

    在MVC 3中 数据验证,已经应用的非常普遍,我们在web form时代需要在View端通过js来验证每个需要验证的控件值,并且这种验证的可用性很低.但是来到了MVC 新时代,我们可以通过MVC提供的 ...

  7. JMS【四】--Spring和ActiveMQ整合的完整实例

    第一篇博文JMS[一]--JMS基本概念,我们介绍了JMS的两种消息模型:点对点和发布订阅模型,以及消息被消费的两个方式:同步和异步,JMS编程模型的对象,最后说了JMS的优点. 第二篇博文JMS[二 ...

  8. mysql 性能问题的解决

    场景:模拟一天的数据,每个10秒,遍历1000个设备,每个设备模拟一个实时数据,总的数据量为:24*60*60/10*1000 = 864万条记录.-------------------------- ...

  9. RTB

    RTB —— Real Time Bidding 的简称,就是实时竞价.跟传统购买形式相比,RTB是在每一个广告展示曝光的基础上进行竞价,就是每一个PV都会进行一次展现竞价,谁出价高,谁的广告就会被这 ...

  10. eclipse 删除 tomcat8 重新添加的问题

    今天手贱,把Eclipse里的tomcat删掉了,然后发现后面就不能重建了,很蛋疼啊...而且今天也发现eclipse里的tomcat启动时会把本地原来conf目录下的配置比如:tomcat-user ...