在末尾添加节点：

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. nutch-2.1导入eclipse+mysql运行

    初次接触nutch,记录下来 首先数据库 CREATE DATABASE nutch DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_unicode_c ...

  2. 控件（进度类）: RangeBase, Slider, ProgressBar, ProgressRing

    1.RangeBase(基类) 的示例Controls/ProgressControl/RangeBaseDemo.xaml <Page x:Class="Windows10.Cont ...

  3. matlab 获取鼠标位置

    转载:http://hi.baidu.com/alec1228/item/68ea36ebe4046f3a86d9deab 第一种途径:ginput()函数 ginput提供了一个十字光标使我们能更精 ...

  4. iOS二维码扫描IOS7系统实现

    扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我们需要用到一下几个类: AVCaptureSession 会话对象.此类作为硬件 ...

  5. Android数据存储-文件操作

    一.预备知识 1.Android中的MVC设计模式 MVC (Model-View-Controller):M是指逻辑模型,V是指视图模型,C则是控制器.一个逻辑模型可以对于多种视图模型,比如一批统计 ...

  6. ecshop /includes/lib_base.php、/includes/fckeditor/editor/dialog/fck_spellerpages/spellerpages/server-scripts/spellchecker.php Backdoor Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 ECShop是国内一款流行的网店管理系统软件,其2.7.3版本某个补丁存 ...

  7. 关于 SSV-ID: 4474 POC的分析和思考

    SSV-ID: 4474 SSV-AppDir: Discuz!漏洞 发布时间: 2008-11-21 (GMT+0800) URL:http://sebug.net/vuldb/ssvid-4474 ...

  8. Andirod——网络连接（HttpURLConnection）

    Android中使用HTTP协议访问网络的方法主要分为两种: 使用HttpURLConnection 使用HttpClient 本文主要内容是HttpURLConnection的使用. HttpURL ...

  9. 数据结构算法C语言实现（三十二）--- 9.1静态查找表

    一.简述 静态查找表又分为顺序表.有序表.静态树表和索引表.以下只是算法的简单实现及测试,不涉及性能分析. 二.头文件 /** author:zhaoyu date:2016-7-12 */ #inc ...

  10. 企业开发中选择logback而不是log4j的理由

    不知道看到这篇文章的Java工程师有没有考虑过这个问题:为什么在企业开发中会选择logback来记录日志,而不是log4j呢? 如果你以前没有考虑过这个问题,那么现在如果让你考虑一下,你可能觉的会是因 ...