<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js创建子节点</title>
    </head>
    <body>
        <!--在后面加-->
        <ul id="test1">
            <li>JavaScript</li>
            <li>HTML</li>
        </ul>
        <!--前面加入-->
        <ul id="test2">
            <li>JavaScript</li>
            <li>HTML</li>
        </ul>
        <!--指定位置插入-->
        <ul id="test3">
            <li>javascript</li>
            <li>HTML</li>
        </ul>
    </body>
    <script type="text/javascript">
          var otest1 = document.getElementById("test1");  
          var newnode1=document.createElement("li");
          newnode1.innerHTML="This is a new li";
          otest1.appendChild(newnode1);
//          otest1.insertBefore(newnode1,otest1.lastChild);
          
          var otest2 = document.getElementById("test2");  
          var newnode2=document.createElement("li");
          newnode2.innerHTML="this is a new li";
          otest2.insertBefore(newnode2,otest2.firstChild);
          
//          指定位置插入
          var otest3 = document.getElementById("test3");  
          var node3=document.getElementsByClassName("li")[1];
          var newnode3=document.createElement("li");
          newnode3.innerHTML="this is a new li";
          otest3.insertBefore(newnode3,node3);
          
          
    </script>
</html>

js创建子节点的更多相关文章

  1. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  2. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  3. js遍历 子节点 子元素

    Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...

  4. js获得子节点, 获得tab转json值

    //提取表格的值,JSON格式 function GetTableData(table) { var tableData = new Array(); //创建数组 alert("行数:&q ...

  5. C#操作XML学习之创建XML文件的同时新建根节点和子节点(多级子节点)

    最近工作中遇到一个问题,要求创建一个XML文件,在创建的时候要初始化该XML文档,同时该文档打开后是XML形式,但是后缀名不是.在网上找了好些资料没找到,只能自己试着弄了一下,没想到成功了,把它记下来 ...

  6. Web网页树形列表中实现选中父节点则子节点全选和不选中父则子全不选

                需要实现的功能:选中父节点对应子节点全选:不选中父节点,对应子节点也不选中 如下图所示,选中车队,对应车队中车辆也全部选中,以实现车队中所有车辆在地图上的显示. 选中cqupt ...

  7. JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  8. JS之获取子节点

    在JS中获取子节点有以下几种方法: firstElementChild.firstChild.childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输 ...

  9. js的DOM节点操作：创建 ，插入，删除，复制，查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

随机推荐

  1. 写了那么多年 Java 代码，终于 debug 到 JVM 了

    继上篇文章 原创 | 全网最新最简单的 openjdk13 代码编译 之后,我们有了自己编译后的 jdk 和 hotspot,如下图所示.接下来就来干一番事情. 搭建调试环境 1.下载 CLion 软 ...

  2. Spring系列（六）：Spring事务源码解析

    一.事务概述 1.1 什么是事务 事务是一组原子性的SQL查询,或者说是一个独立的工作单元.要么全部执行,要么全部不执行. 1.2 事务的特性(ACID) ①原子性(atomicity) 一个事务必须 ...

  3. Tomcat8 结构原理解析

    Tomcat是JavaWeb组件架构中一款apache开源的服务器软件,通过对其的学习,总结并且分享了关于它的知识,下边是分享ppt内容,希望对想了解tomcat人有帮助. Tomcat历史 1999 ...

  4. SQL SERVER数据库日常使用总结

    以下内容为平时工作自己个人总结,仅供参考,欢迎交流 SELECT A.CBM,A.CMC,SUM(B.MJE)MJE FROM YXHIS..TBZDZTHZ A,YXHIS..TBZDZTMX B ...

  5. SVM面试知识点总结

    1. SVM 原理 SVM 是一种二类分类模型.它的基本思想是在特征空间中寻找间隔最大的分离超平面使数据得到高效的二分类,具体来讲,有三种情况(不加核函数的话就是个线性模型,加了之后才会升级为一个非线 ...

  6. JavaScript ES6函数式编程（一）：闭包与高阶函数

    函数式编程的历史 函数的第一原则是要小,第二原则则是要更小 -- ROBERT C. MARTIN 解释一下上面那句话,就是我们常说的一个函数只做一件事,比如:将字符串首字母和尾字母都改成大写,我们此 ...

  7. 从.NET CORE2.2升级到3.0过程及遇到的一些问题

    RoadFlow工作流引擎从.NET Core2.2升级到3.0遇到了一些问题及解决方式这里记录一下. 1.DLL项目框架从2.2选择到3.0,这个没什么好说的,没有问题.重点的WEB层的一些变化. ...

  8. thinkphp5框架笔记(ing)

    重新整理下学习tp5手册的笔记.自己再好好看一次tp5的开发手册,学到哪里记到哪里. 0x01 安装 Composer安装 ThinkPHP5支持使用Composer安装 curl -sS https ...

  9. Cocos2d-x 学习笔记(8) ActionManager

    1. 概述 ActionManager管理所有的action,调度所有的action,删除指定的action.每个action对应一个node对象,action存储在actions中,actions和 ...

  10. eclipse中最有用的10个快捷键

    这里列出一些在使用eclipse的过程中最有用的10个快捷键,通过灵活使用这些快捷键可以提高开发效率和开发质量. 1. [ctrl+shift+r]打开资源 这可能是所有快捷键中最省时间的了.这个快捷 ...