在末尾添加节点：

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. Freemarker list标签,list数据判断使用

    <#if listSecMDIF?exists && (listSecMDIF?size>0)> <ul style="float: left;mar ...

  2. 【HDU 2874】Connections between cities（LCA）

    dfs找出所有节点所在树及到树根的距离及深度及父亲. i和j在一棵树上,则最短路为dis[i]+dis[j]-dis[LCA(i,j)]*2. #include <cstring> #in ...

  3. GridView联表搜索，排序

    kartik-v/yii2-grid 文档http://demos.krajee.com/grid 在win7下 composer require kartik-v/yii2-grid "@ ...

  4. struts2 action 页面跳转

    struts2 action 页面跳转 标签: actionstruts2redirect 2013-11-06 16:22 20148人阅读 评论(0) 收藏 举报 (1)type="di ...

  5. [bzoj4326][NOIP2015]运输计划

    Description 公元2044年,人类进入了宇宙纪元. 国有个星球,还有条双向航道,每条航道建立在两个星球之间,这条航道连通了国的所有星球. 小掌管一家物流公司,该公司有很多个运输计划,每个运输 ...

  6. codeforces 723B：Text Document Analysis

    Description Modern text editors usually show some information regarding the document being edited. F ...

  7. CLR/.NET/C#/Visual Studio/ASP.NET各版本之间的关系（转）

    由于这篇文章记录的是2015年7月,那时.net core还是叫做.net core 5 名词定义 下列这些名词,写.NET 的人一定都不陌生,但你是否有真正理解呢?如果看了我的摘要文字说明还无法理解 ...

  8. shell 调试手段总结

    对于厌烦了的 print 和 echo,可以尝试点新鲜省力的小手段. 1. 使用 shell 的执行选项 sh 和 bash 常用的执行指令有:-n.-x.-c.-v. 其中: -n 是 noexec ...

  9. ADC/DAC的一些参数

    1.LSB,Least Significant Bit LSB是指最低位一个bit的权值,比喻ADC是一把尺子,那LSB则是它的最小刻度.LSB=Vfs/(2^N),Vfs为full scale vo ...

  10. ansible模块authorized_key

    示例: --- - hosts: test remote_user: root tasks: - name: deliver authorized_keys authorized_key: user: ...