<!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. Linux学习-基于CentOS7的LAMP环境实现多虚拟主机

    一.实验环境 系统:CentOS7.6 主机:两台(一台也可以),一台实现apache+php-fpm (192.168.214.17),一台实现mysql服务器 (192.168.214.27) 软 ...

  2. HTML5的新特性：范围样式，又叫做<style scoped>

    Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> .开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于 ...

  3. 果蝇优化算法（FOA）

    果蝇优化算法(FOA) 果蝇优化算法(Fruit Fly Optimization Algorithm, FOA)是基于果蝇觅食行为的仿生学原理而提出的一种新兴群体智能优化算法. 果蝇优化算法(FOA ...

  4. c++ bitset——一个有趣的类型

    转自:https://www.cnblogs.com/magisk/p/8809922.html 概况:一个最小可达1bit的特殊数据结构

  5. [CF1082G]Petya and Graph：最小割

    分析 发这篇博客的目的就是要让你们知道博主到底有多菜. 类似于[NOI2006]最大获利.(明明就是一模一样好吧!) 不知道怎么了,半秒就想到用网络流,却没想出怎么建图. 连这么简单的题都没做出来,我 ...

  6. UVALive 6859 Points （凸包）

    Points 题目链接: http://acm.hust.edu.cn/vjudge/contest/130303#problem/E Description http://7xjob4.com1.z ...

  7. sqlserver控制台-添加用户

    1.右键新建登陆名 2. 常规选项 3.服务器角色 4.用户映射

  8. SQL 基本查询语句

    --使用数据库 use date go --创建表班级表 create table classInfo ( classNo ,),--主键约束使用primary key identity classN ...

  9. 北风设计模式课程---访问者（Visitor）模式

    北风设计模式课程---访问者(Visitor)模式 一.总结 一句话总结: 设计模式是日常问题的经验总结方案,所以学好设计模式对日常出现的问题可以有很好的解决. 访问者设计模式有点神似 抽象工厂模式, ...

  10. linux的find和grep区别?

    为什么会把 grep和find 这两个命令拿在一起来讨论? 是因为他们之间有一个容易混淆的地方, [在我的记忆中] : -name ? 它是find的选项! 不是grep的选项! 实际上, find基 ...