<!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动手动脑和动手实验

    动手动脑一: EnumTest.java: 程序代码: public class EnumTest { public static void main(String[] args) { Size s= ...

  2. Ubuntu安装exfat工具

    sudo apt-get undate sudo apt-get install exfat-utils

  3. 代码审计-MetInfo CMS变量覆盖漏洞

    0x01 代码分析 安装好后是这样的 漏洞文件地址\include\common.inc.php 首先是在这个文件发现存在变量覆盖的漏洞 foreach(array('_COOKIE', '_POST ...

  4. hydra暴力破解

    hydra,是一个非常好用的暴力破解工具,而且名字也很cool. 下面是官网上的介绍: AFP, Cisco AAA, Cisco auth, Cisco enable, CVS, Firebird, ...

  5. 不吹不黑也不撕，我们就简简单单谈谈Vue

    Vue在近两年中得到了快速的发展,17年初开始,市场上对Vue开发者的需求量越来越大,北京在招的前端职位中40%的岗位对Vue技能有要求,在杭州,虽然React仍然是主力框架,但是Vue使用的比例也在 ...

  6. MyCat教程五：实现分库分表

      本文我们来介绍下MyCat的分库分表操作 分库分表 一.分片规则介绍   在rule.xml中定义了各种myCat支持的分片规则. 取模mod-long 自然月分片 sharding-by-mon ...

  7. pytest3-命令行选项

    1.pytest -h 查看pytest常用命令 E:\myproj\pytest_demo>pytest -h usage: pytest [options] [file_or_dir] [f ...

  8. Spring Boot项目中使用Mockito

    本文首发于个人网站:Spring Boot项目中使用Mockito Spring Boot可以和大部分流行的测试框架协同工作:通过Spring JUnit创建单元测试:生成测试数据初始化数据库用于测试 ...

  9. Java并发入门之FutureTask

    Java并发入门之FutureTask 前言: 最近遇到一个项目需要上传图片到服务器,API要求是二进制流,那就跑慢点一点点上传. 于是对多线程从没有应用过的我,决定拿多线程直接应用于代码. 应用Ex ...

  10. 基于appium实现的线性代码引用unittest单元测试框架

    在前段时间,分享了几篇关于appium基础的博文,再加上期间也有讲到unittest测试框架,所以今天就来一个专题,在appium+python实现的线性代码基础上,引入unittest框架,使代码更 ...