<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>在末尾添加节点</title>

     </head>

     <body>

         <ul>

             <li>111</li>

             <li>222</li>

             <li>333</li>

             <li>444</li>

         </ul>

         <br>

         <input type="button" value="添加节点" onclick="addNode()" />

         <script type="text/javascript">

             function addNode() {

                 // 获取到ul

                 var ul = document.getElementsByTagName("ul")[0];

                 // 创建li

                 var li = document.createElement("li");

                 // 创建文本

                 var length = ul.children.length + 1;

                 var text = document.createTextNode(length + "" + length + "" + length);

                 // 在li中加入文本

                 li.appendChild(text);

                 // 在ul中加入li

                 ul.appendChild(li);

             }

         </script>

     </body>

 </html>

 

JavaScript基础1——在末尾添加节点的更多相关文章

  1. JavaScript案例二：在末尾添加节点

    简单实现通过JavaScript来增加HTML节点 <!DOCTYPE html> <html> <head> <title>JavaScript在末尾 ...

  2. js实现在末尾添加节点

    在末尾添加节点: 1.获取ul标签 2.创建li标签 document.createElement("标签名称")方法 3.创建文本 document.createTextNode ...

  3. Javaweb学习笔记——（四）——————JavaScript基础&DOM目录

    1.案例一:在末尾添加节点 第一个:获取到ul标签 第二部:创建li标签 document.createElement("标签名称")方法 第三步:创建文本 document.cr ...

  4. JavaScript实验一(添加节点，删除节点)

    静态html页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  5. jQuery基础--创建节点和 添加节点

    创建节点 $(function () { // var box = document.getElementById("box"); // // var a = document.c ...

  6. javascript基础部分

    javascript基础部分 1  数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...

  7. javascript 基础教程[温故而知新一]

    子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...

  8. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  9. python web开发学习笔记一：javascript基础

    一.认识js: 能进入到软件所实习是我的最大的收获,也是我的荣幸,我相信努力付出一定能够换回收获. 项目最先开始的是接触到web前端的一些内容,我们需要利用flask搭建应该有的框架.我有一些pyth ...

随机推荐

  1. flask入门，Hello World！

    flask这个框架简单易用,去年2018的使用份额已经快接近django了.入门首选,没有太多的要求. 接下来,写个Hello World吧 1.新手入门,如果你是在windows下使用的,需要先安装 ...

  2. HRESULT: 0x80040228

    When run the arcgis engine codes in the console application, may come to the exception: HRESULT: 0x8 ...

  3. docker for windows 中 镜像 microsoft/donet 的文件结构

    一共有3个文件夹和1个文件: [Program Files] [Users] [Windows] License.txt 使用vs默认生成的dockerfile文件生成后,会新增app文件夹.

  4. JWT--无状态单点登录

    序言 传统的 seesion 认证存在的问题: 1)用户信息存储在内存中,用户规模大之后增加服务器开销:2)由于登录信息存储在内存中,限制了登录机器,不利于分布式站点. JWT JWT无状态登录 常规 ...

  5. BZOJ 3043: IncDec Sequence 差分 + 思维

    Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) ...

  6. 记一下今天上下班学的Thread

    1 Thread 默认为前台线程,即主程序退出后,线程还可以继续(曾经就掉入这个坑中,使用两线程分别进行UDP收发,结果发线程结束了退出方法,收线程还在继续) 2 Thread 没有可以暂停,可以重新 ...

  7. linux/Unix下的vim/vi指令的使用方法

    概述 以下这篇文章介绍的是关于vim的使用方法,由于我本身对linux没有太多的研究,写下的这篇文章纯属是在实际中经常使用vim指令,想通过这篇文章记录下来,方便以后使用时查找方便.个人认为,对于普通 ...

  8. Linux内核调试方法总结之ddebug

    [用途] Linux内核动态调试特性,适用于驱动和内核各子系统调试.动态调试的主要功能就是允许你动态的打开或者关闭内核代码中的各种提示信息.适用于驱动和内核线程功能调试. [使用方法] 依赖于CONF ...

  9. linux中也有闹钟alarm, timer, stopwatch, world clock 等等

    stopwatch和timer的区别? timer叫计时器, 是先给出一个时间, 然后从现在开始, 倒数, 减少, 直到时间为0 stopwatch 叫跑錶, 则是从现在开始, 往后 增加时间, 事先 ...

  10. fedora23帮定键盘系统操作快捷键

    在All settings -> keyboard 主要是以super为主, 然后有 super+ shift+...虽然感觉用 ctrl+super+... 来组合更方便, 但是用 shift ...