<!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. 【noip2016提高组day2T3】【愤怒的小鸟】状压dp转移时的集合包含

    (上不了p站我要死了,图来自百度,侵权度娘背锅) 调死我了... 标题就说明了,死在了集合包含上.因为这道题与其他的状压题不同,其他的题基本上都是要求集合不重合,而这道题完全是可以的. 废话不多说,先 ...

  2. Python用MyQR生成自定义个性二维码

    MyQR是一个能够生成自定义二维码的python第三方库,根据需要能够生成普通二维码.带背景图片的艺术二维码.动态二维码. 1.MyQR安装 安装非常简单,直接用pip install MyQR,需要 ...

  3. J - Mr.Panda and TubeMaster

    题解 我们可以把每个格子拆成两个点,一个表示横向的,一个表示纵向的,相邻的格子横向和纵向连边. 如果直接按照题意做的话,我们应当在横向和纵向的点之间连边,有限制的边设下界为1,然后跑可行流. 或者考虑 ...

  4. CF704D Captain America

    http://codeforces.com/problemset/problem/704/D 题解 对于两种颜色的染色,我们可以把它看做选择问题. 比如说红色的代价小,所以我们尽可能多的染红色. 然后 ...

  5. AI移动，缓慢转身设置(针对AI Character)

    AICharacter自身: Use Controller Rotation Yaw设为False Auto Possess AI 设为 Placed in World or Spawned Char ...

  6. [ethereum源码分析](3) ethereum初始化指令

    前言 在上一章介绍了关于区块链的一些基础知识,这一章会分析指令 geth --datadir dev/data/02 init private-geth/genesis.json 的源码,若你的eth ...

  7. Charles抓取手机https请求

    1.下载Charles工具,3.92破解版:http://pan.baidu.com/s/1cko2L4 密码:chmy 2.安装SSL证书,默认安装就可以 3.证书安装成功后,点击详细信息--> ...

  8. [CSP-S模拟测试]:小P的生成树（数学+Kruskal）

    题目描述 小$P$是个勤于思考的好孩子,自从学习了最大生成树后,他就一直在想:能否将边权范围从实数推广到复数呢?可是马上小$P$就发现了问题,复数之间的大小关系并没有定义.于是对于任意两个复数$z_1 ...

  9. Spring Data JPA开发中遇到的问题1：org.hibernate.hql.internal.ast.QuerySyntaxException: DispatchShift is not mapped

    org.hibernate.hql.internal.ast.QuerySyntaxException: T_D_SHIFT_DISPATCH is not mapped 错误原因: 没有映射到表,经 ...

  10. day03-Python基础

    1:函数 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 减少重复代码 使程序变的可扩展 使程序变得易维护 函数定义: def sayh ...