<!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. Delphi 2010 secondsBetween Bug

    在设置定时任务时,无意之间发现一个BUG, 定时在00:10:00的任务,执行了2次, 百思不得其解, 一调试发现, 00:10:00,00:09:59的secondsBetween结果值是0, 正确 ...

  2. mybatis添加数据时返回主键 insert 返回主键值

    insert 返回主键值 useGeneratedKeys=“true” parameterType=“USer” keyProperty=“id”, <insert id="inse ...

  3. PHP培训教程 PHP的运算符

    PHP中有丰富的运算符集,它们中大部分直接来自于C语言.按照不同功能区分,兄弟连PHP培训 运算符可以分为:算术运算符.字符串运算符.赋值运算符.位运算符.条件运算符,以及逻辑运算符等.当各种运算符在 ...

  4. android 启动默认的邮件客户端，多附件的问题

    目前开发的app中需要发送邮件,所以需要调用android默认的邮件客户端,并需要添加多个邮件附件,我该通过哪个组件调用默认的客户端?用什么组件来支持多个附件的电子邮件? 是通过下面的哪一个?(Int ...

  5. RedHat下使用gcc编译HelloWorld.cpp

    gcc ./HelloWorld.cpp 错误: /tmp/ccZuz3Ca.o:(.eh_frame+0x12): undefined reference to `__gxx_personality ...

  6. Socket网络通信编程（一）

    1.学习基本概念.传统的同步阻塞式I/O编程.伪异步IO实现 2.学习基于NIO的同步非阻塞式编程 3.了解基于NIO2.0的异步非阻塞(AIO)编程 1.1 基本概念 Socket又称“套接字”,应 ...

  7. mpvue 未找到app.json入口文件

    [情况1] 通过 vue init mpvue/mpvue-quickstart myproject 创建一个mpvue项目,发现项目中没有app.json文件. 解决:npm run dev 编译一 ...

  8. Rtmp AAC基本格式（转）

    第一个audio data包:AAC sequence header 第二个audio data包:AAC raw AF表示的含义: 1)第一个字节af,a就是10代表的意思是AAC, Format ...

  9. EDM营销应注意要定期发送邮件

    一个成熟的EDM营销方案应该要确定完整的邮件发送频率,并且严格按照计划执行.这点在EDM营销过程中非常重要,下面为大家分析一下. 一个EDM营销应该确定一下发送的时间,每月或者每周发送一次,这样用户能 ...

  10. SpringBoot 集成mongodb（1）单数据源配置

    新项目要用到mongodb,于是在个人电脑上的虚拟环境linux上安装了下mongodb,练习熟悉下. 1.虚拟机上启动mongodb. 首先查看虚拟机ip地址,忘了哈~~ 命令行>ifconf ...