<!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】用Freemarker完美导出word文档（带图片）

    Java  用Freemarker完美导出word文档(带图片) 前言 最近在项目中,因客户要求,将页面内容(如合同协议)导出成word,在网上翻了好多,感觉太乱了,不过最后还是较好解决了这个问题. ...

  2. 手把手教你安装Eclipse最新版本的详细教程 - 大佬的鸡肋，菜鸟的盛宴（非常详细，非常实用）

    简介 首先声明此篇文章主要是针对测试菜鸟或者刚刚入门的小伙们或者童鞋们,大佬就没有必要往下看了. 写这篇文章的由来是因为后边要用这个工具,但是由于某些原因有部分小伙伴和童鞋们可能不会安装此工具,为了方 ...

  3. classpath:类路径

    classpath:可以用于web.xml中获取spring springmvc配置文件的位置 用于sprnig配置文件中获取mapper的位置 classpath:可以获取到java目录下的,res ...

  4. A-02 梯度下降法

    目录 梯度下降法 一.梯度下降法详解 1.1 梯度 1.2 梯度下降法和梯度上升法 1.3 梯度下降 1.4 相关概念 1.4.1 步长 1.4.2 假设函数 1.4.3 目标函数 二.梯度下降法流程 ...

  5. Spring Boot2 系列教程(十一)Spring Boot 中的静态资源配置

    当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥 Spring Boot 中的静态资源加载问题:"松哥,我的 HTML 页面好像没有样 ...

  6. 在C#中调用Python中遇到的坑(No module named xxx)

    例如Python的代码是这个样子的. # coding=<utf-> # -*- coding: utf- *- import requests import urllib def Cle ...

  7. unittest中HTMLTestRunner模块生成

    unittest里面是不能生成html格式报告的,需要导入一个第三方的模块:HTMLTestRunner 一.导入HTMLTestRunner 方法1.这个模块下载不能通过pip安装了,只能下载后手动 ...

  8. PHP array_udiff_uassoc

    1.函数的参数:返回数组的差集.用定义的函数比较键值和值. 2.函数的参数: @params array $array @params array $array1 ... @params callab ...

  9. sqlserver 查看最耗时的前10个存储过程

    SELECT TOP OBJECT_NAME(a.object_id,database_id) SP_Name, DB_NAME(a.database_id) Database_Name, a.cac ...

  10. redis应用场景总结redis平时我们用到的地方蛮多的，下面就了解的应用场景做个总结：

    redis常见应用场景 1.热点数据的缓存 由于redis访问速度块.支持的数据类型比较丰富,所以redis很适合用来存储热点数据,另外结合expire,我们可以设置过期时间然后再进行缓存更新操作,这 ...