在末尾添加节点：

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. Android中处理崩溃异常CrashHandler

    来源:http://blog.csdn.net/liuhe688/article/details/6584143 大家都知道,现在安装Android系统的手机版本和设备千差万别,在模拟器上运行良好的程 ...

  2. 7 static关键字

    class Person { static int i; static void fun() { System.out.println("我是静态函数"); } } 在静态函数中不 ...

  3. Linux内核邮件列表发送和回复格式研究

    1.使用的内容格式为[纯文本],这个在国内的客户端已经没有了,大公司只有微软的outlook. 2.回复引用时,使用符号[>]作为标记,且回复的内容不能在最顶部,应该在最下面.参考:http:/ ...

  4. Struts 2 Learning

    目录 . J2EE简介 . JAVA EE应用的分层模型 . 搭建Struts2 Demo应用 . struts2流程 . struts2的常规配置 . 实现Action . 配置Action . 配 ...

  5. C#读txt文件并写入二维数组中（txt数据行，列未知）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  6. Java多线程实践

    1.实现Runnable接口 import java.util.Random; public class PrintTask implements Runnable{ private final in ...

  7. <转>iOS9 Day-by-Day：iOS开发者必须了解的iOS 9新技术与API

    iOS9 Day-by-Day是作者Chris Grant新开的一个系列博客,覆盖了iOS开发者必须知道的关于iOS 9的新技术与API,并且还进行了实际操作演练,每篇文章中相关的代码Chris都会将 ...

  8. sql like

    在java里面写sql要用 like CONCAT('%',?,'%')

  9. BZOJ1031: [JSOI2007]字符加密Cipher

    传送门 后缀数组模板题 //BZOJ 1031 //by Cydiater //2016.9.21 #include <iostream> #include <cstring> ...

  10. centos忘记root密码，重新设置的方法

    今天重新装了一个centos6.6,好像root密码没有叫我设置吧,然后用虚拟机开始安装之前的密码登录显示失败,所以有了下面的彩蛋.....Helloween... 在虚拟机安装了Centos,今天要 ...