在末尾添加节点：

1.获取ul标签

2.创建li标签

document.createElement("标签名称")方法

3.创建文本

document.createTextNode("文本内容");

4.把文本添加到li下面

使用 appendChild方法

5.把添加到ul的末尾

使用 appendChild方法

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

  </style>

 </head>

 <body>

 <div>

    <ul id="ulid">

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

    </ul>

</div>

</div>

    <br/>

    <input type="button" value="add" onclick="add1();"/>

    <script type="text/javascript">//在末尾添加节点

        function add1() {

            //获取到ul标签

            var ul1 = document.getElementById("ulid");

            //创建标签

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

            //创建文本

            var tex1 = document.createTextNode("5555");

            //把文本加入到li下面

            li1.appendChild(tex1);

            //把li加入到ul下面

            ul1.appendChild(li1);

        }

    </script>

 </body>

</html>

js实现在末尾添加节点的更多相关文章

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

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

  2. JavaScript基础1——在末尾添加节点

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 【实践】js 如何实现动态添加文本节点

    对于我这个js 小白来说 今天鼓起勇气做起了邮箱认证这个特效 但是这次不是想说如何实现这这个特效而是想记录一下特效当中的某个部分 那就是向元素节点动态添加文本节点 百度了一下动态添加文本节点的方式 是 ...

  4. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  5. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  6. js拾遗：appendChild 添加移动节点

    原文:js拾遗:appendChild 添加移动节点 写js一年多了,一直以为自己很牛逼,开始写各种博文分享,昨天写了一篇<浅谈 IE下innerHTML导致的问题>在看了下面的评论,我才 ...

  7. JQuery 添加节点

    Mark一段自己写的添加节点的代码 function reply2(){ $( "<div class=sec1-div5>"+"<div class= ...

  8. jquery 添加节点的几种方法介绍

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. 向html中添加节点

    简单: ①,js中: (function () { var box=document.querySelector("#box"); var con1=document.create ...

随机推荐

  1. Python3 连接Mysql

    代码: #!/usr/bin/env python # encoding: utf-8 """ @author: 侠之大者kamil @file: mysql_test. ...

  2. Hadoop 学习笔记3 Develping MapReduce

    小笔记: Mavon是一种项目管理工具,通过xml配置来设置项目信息. Mavon POM(project of model). Steps: 1. set up and configure the ...

  3. u Calculate e阶乘相加求和问题

    问题: (n < 10)写个算法 回答: 方法一: #include<stdio.h>  int main()  {      int f[10]={1,1,2,6,24,120,7 ...

  4. 高级语言虚拟机的一点理解，对比.NET和Java平台

    最近学习了一些高级语言虚拟机的知识,在此对.NET平台和java平台做一个简单的比较.对java平台已经很熟了,所以此处只介绍.NET平台下的一些概念. 一.CLI 通用语言基础架构(Common L ...

  5. 【BZOJ-4059】Non-boring sequences 线段树 + 扫描线 （正解暴力）

    4059: [Cerc2012]Non-boring sequences Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 440  Solved: 16 ...

  6. ASM ClassReader failed to parse class file - probably due to a new Java class file version that isn't supported yet

    严重: Context initialization failedorg.springframework.beans.factory.BeanDefinitionStoreException: Fai ...

  7. jquery插件-表单验证插件

    JQuery 插件概述: 插件(plugin)也被成为扩展,是一种遵循一定规范的应用程序编写出来的程序,JQuery有大量 现成的插件. 一句话,JQuery插件就是别人依照Jquery官方规范写好的 ...

  8. spoj1811 Longest Common Substring

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  9. Linux学习路线

    为什么要学习Linux? 为什么学Linux,每个人都有自己的理由: Linux是免费的不用花一分钱,能够节约大笔的成本: Linux是开源的,你可以根据自已的需要修改源代码: Linux是开放的,有 ...

  10. java重写equals方法

    @Override public int hashCode() { return task.getId(); } @Override public boolean equals(Object obj) ...