<!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. 多线程技术在iOS开发中的使用

    进程和线程 要使用多线程,首先需要理解进程和线程这2个概念.这里我简单的说一下. 所谓进程对应的是一个应用程序,负责开辟内存空间供应用程序使用,但是进程不能执行任务(指令).一个进程至少包含一条线程, ...

  2. So easy Webservice 7.CXF 发布WebService

    (一)使用ServerFactoryBean 方式实现发布WS服务 1.新建项目,添加cxf jar包到项目中 2.编写服务实现类 /** * CXF WebService * 不用注解 * @aut ...

  3. Base64加密解密原理以及代码实现（VC++）

    Base64加密解密原理以及代码实现 转自:http://blog.csdn.net/jacky_dai/article/details/4698461 1. Base64使用A--Z,a--z,0- ...

  4. 3.27考试总结（hnoi难度）

    1 duel1.1 DescriptionK·⁄¶("“uƒ¢y%¥§H5|+ (?1’m" ’m·ø?1§z<k§⁄k<⁄§lm?0,1,2...§zg ‹‰ª«mS ...

  5. E2 结帐方案如何理解?

    E2 结帐方案如何理解? 此文转载自宇然软件官方网站:http://www.fsyuran.com    

  6. iOS - MVC 架构模式

    1.MVC 从字面意思来理解,MVC 即 Modal View Controller(模型 视图 控制器),是 Xerox PARC 在 20 世纪 80 年代为编程语言 Smalltalk-80 发 ...

  7. 如何制作exe程序可执行文件

    很多软件的运行都需要搭建环境,只有exe文件可以在不安装软件和数据库的环境下运行,那么怎么制作exe程序可执行文件呢,下面天使教你如何制作.   工具/原料   Microsoft Visual St ...

  8. Python学习笔记4—列表

    列表定义 >>> a=['] >>> type(a) <type 'list'> >>> bool(a) #列表有值,则为true T ...

  9. iOS开发之Xcode 6更新默认不支持armv7s架构

    最近一次的Xcode 6更新默认不再支持arm7s架构,究竟是要废除不用呢还是仅仅只是一个疏忽? 目前的Xcode 6配置里定义${ARCHS_STANDARD}为armv7, arm64,当然这个定 ...

  10. [html] Webp、Apng图片格式

    WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间. 与JPEG相同,WebP是一种有损压缩.但谷 ...