<!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】获取当前操作系统桌面路径

    //当前用户桌面 File desktopDir = FileSystemView.getFileSystemView() .getHomeDirectory(); String desktopPat ...

  2. 基于.NET环境，C#语言 实现 TCP NAT

    基于.NET平台和C#语言实现TCP NAT穿越        1.<C# WinForm 跨线程访问控件(实用简洁写法)>       2.<基于.NET环境,C#语言 实现 TC ...

  3. AVL树、红黑树以及B树介绍

    简介 首先,说一下在数据结构中为什么要引入树这种结构,在我们上篇文章中介绍的数组与链表中,可以发现,数组适合查询这种静态操作(O(1)),不合适删除与插入这种动态操作(O(n)),而链表则是适合删除与 ...

  4. 安装高可用Hadoop生态 （二） 安装Zookeeper

    2.    安装Zookeeper 2.1. 解压程序 ※ 3台服务器分别执行 .tar.gz -C/opt/cloud/packages /opt/cloud/bin/zookeeper /conf ...

  5. asp.net core 腾讯验证码的接入

    asp.net core 腾讯验证码的接入 Intro 之前使用的验证码服务是用的极验验证,而且是比较旧的,好久之前接入的,而且验证码服务依赖 Session,有点不太灵活,后来发现腾讯也有验证码服务 ...

  6. Io流的概述

    Io流的概述IO: I输入(Input),O 输出(Output)1.什么是IO流? 数据流,IO是严格的“水流模型” 所以IO流是用来读写数据,或者传输数据. 注意:File只能操作文件对象本身,而 ...

  7. DataStructure之线性表以及其实现

    线性表 应用:多项式的表示 什么是线性表 多项式表示问题给出的启示: 同一个问题可以有不同的表示(存储)方法 有一类共性问题 : 有序线性序列的租住和管理 “线性表(Linear List)” : 由 ...

  8. Spring Boot WebFlux 集成 Mongodb 数据源操作

    WebFlux 整合 Mongodb 前言 上一讲用 Map 数据结构内存式存储了数据.这样数据就不会持久化,本文我们用 MongoDB 来实现 WebFlux 对数据源的操作. 什么是 MongoD ...

  9. CSS中的各种单位

    单位 描述                                                                                               ...

  10. Eclipse 创建 Maven 项目

    本人也是新手小白,在创建 Maven 项目的时候几乎踩完了所有的坑.特此总结如下: 1.咱先选中 File -> New -> Maven Project 2.然后如下图    在这里说明 ...