<!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. BZOJ 2535: [Noi2010]Plane 航空管制2

    Description 世博期间,上海的航空客运量大大超过了平时,随之而来的航空管制也频频发生.最近,小X就因为航空管制,连续两次在机场被延误超过了两小时.对此,小X表示很不满意. 在这次来烟台的路上 ...

  2. Spring源码分析之IOC的三种常见用法及源码实现（一）

    1.ioc核心功能bean的配置与获取api 有以下四种 (来自精通spring4.x的p175) 常用的是前三种 第一种方式 <?xml version="1.0" enc ...

  3. ASP.NET Core API总结(一)

    ASP.NET Core API 问题:当应用收到一个http请求之后,API应用程序是怎么一步步执行的. 注册服务——构造容器——使用服务——创建对象 1.         创建一个新的API之后, ...

  4. Redis 哨兵机制以及灾难演练

    #### 哨兵都采用这个配置即可 ##### 1.修改sentinel.conf配置文件 ![image](https://img2018.cnblogs.com/blog/1334966/20191 ...

  5. Redis 3.0中文版学习(二)

    网址:http://wiki.jikexueyuan.com/project/redis-guide/entry-to-master-middle.html 1.Redis的列表: 采用链表的实现方法 ...

  6. [Luogu3112] [USACO14DEC]后卫马克Guard Mark

    题意翻译 FJ将飞盘抛向身高为H(1 <= H <= 1,000,000,000)的Mark,但是Mark被N(2 <= N <= 20)头牛包围.牛们可以叠成一个牛塔,如果叠 ...

  7. std::weak_ptr

    weak_ptr 是一种不控制对象生命周期的智能指针, 它指向一个 shared_ptr 管理的对象. 进行该对象的内存管理的是那个强引用的 shared_ptr. weak_ptr只是提供了对管理对 ...

  8. 02--Java Jshell的使用 最适合入门的Java教程

    JShell JShell目标 Java Shell 工具(简称:JShell)是一个用于学习Java编程语言和构建Java代码原型的交互式工具.JShell是一个Read-Evaluate-Prin ...

  9. C#+Selenium抓取百度搜索结果前100网址

    需求 爬取百度搜索某个关键字对应的前一百个网址. 实现方式 VS2017 + Chrome .NET Framework + C# + Selenium(浏览器自动化测试框架) 环境准备 创建控制台应 ...

  10. Leetcode（9）回文数

    Leetcode(9)回文数 [题目表述]: 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 第一次:直接全部转 执行用时:148 ms: 内存消耗:13.4 ...