1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>在末尾添加节点</title>
  6.      </head>
  7.      <body>
  8.          <ul>
  9.              <li>111</li>
  10.              <li>222</li>
  11.              <li>333</li>
  12.              <li>444</li>
  13.          </ul>
  14.          <br>
  15.          <input type="button" value="添加节点" onclick="addNode()" />
  16.          <script type="text/javascript">
  17.              function addNode() {
  18.                  // 获取到ul
  19.                  var ul = document.getElementsByTagName("ul")[0];
  20.                  // 创建li
  21.                  var li = document.createElement("li");
  22.                  // 创建文本
  23.                  var length = ul.children.length + 1;
  24.                  var text = document.createTextNode(length + "" + length + "" + length);
  25.                  // 在li中加入文本
  26.                  li.appendChild(text);
  27.                  // 在ul中加入li
  28.                  ul.appendChild(li);
  29.              }
  30.          </script>
  31.      </body>
  32.  </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. C++fread/fwrite的基础用法

    前言 fread是吼东西 应某人要求(大概)科普一下 fread #include <iostream> #include <cstdlib> #include <cst ...

  2. spring boot不要放在tomcat下启动，因为自身就带了集成tomcat

    spring boot不要放在tomcat下启动,因为自身就带了集成tomcat

  3. java——逻辑运算符与（&和&&）或（|和||）

    区别: 1意思不同: &&是“与”的意思,||是“或者”的意思. 2 使用上不同:a && b:a和b同时为true 才返回 true, 否则返回false:a || ...

  4. Codeforces 864E - Fire(dp)

    原题连接:http://codeforces.com/problemset/problem/864/E 题意:一个人想从大火中带走一些东西.每次他只能带一个,耗时ti ,价值为pi, 当总时间超过di ...

  5. go语言实战 摘抄

    append 函数append会智能地处理底层数组的容量增长.在切片的容量小于1000个元素时,总是会成倍地增加容量.一旦元素个数超过1000,容量的增长因子就会设为1.25, 也就是每次增加25%的 ...

  6. 【WINDOWS】设置路由表实现有线内网，无线外网

    前提!!! 需要有线无线双网卡

  7. bootstrap datetimepicker 位置错误

    bootstrap datetimepicker 位置错误,大致问题跟其他网友描述的一样,页面自动出滚动条,然后datetimepicker飘到页脚,网上的方法都是修改place方法里面的555行左右 ...

  8. 12 Django组件-form组件

    知识预览 forms组件 forms组件 校验字段功能 针对一个实例:注册用户讲解. 模型:models.py class UserInfo(models.Model): name=models.Ch ...

  9. 图论&线性基（?）(8.12)

    边没有负权,最短路最多只有n条边 很暴力的思想: 先跑一遍最短路,找出最短路上的边,枚举每条边,翻倍,放进原图再跑一遍.取最大值 好熟悉啊 分层建图,建k层 每层内部是原图 若原图中u到v有连边,则由 ...

  10. 如何让ls按目录和文件 分开进行列表?

    linux的思想是: 有很多 ＂小工具", 但是功能并不弱的 小工具, 组合起来完成一些复杂的工作, 通过 这些工具的组合可以完成各种各样的, 不同的任务. 如: ls, sort, hea ...