在末尾添加节点：

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. Office密码破解工具最好用的是哪款

    很多的用户朋友设置密码的office文档一般都含有比较重要的信息.因此,忘记密码在破解的过程中非常重视安全保密性.现在有很多款office密码破解工具,很多的用户朋友不知道用哪一款比较好,其中Adva ...

  2. HashMap和TreeMap的区别

    HashMap:数组方式存储key/value,线程非安全,允许null作为key和value,key不可以 重复,value允许重复,不保证元素迭代顺序是按照插入时的顺序,key的hash值是先计算 ...

  3. 【matlab】设定函数默认参数

    C++/java/python系列的语言,函数可以有默认值,通常类似如下的形式: funtion_name (param1, param2=default_value, ...) 到了matlab下发 ...

  4. Microsoft SQL Server，错误: 229 解决方案

    今天我在数据库新建一个用户时,碰到了一个奇怪的问题,账号建好了,也指定了该账号上对应的数据库.但是,奇怪的问题出现了,死活不让我新建表,提示如下: 最后,给我找到问题所在了,就是在指定表权限的时候权限 ...

  5. Ubuntu 使用笔记

    持续更新 从前使用sudo apt update更新时, 发现软件源是cn.archive.ubuntu.com. 最近在system setting 中将软件源改成了archive.ubuntu.c ...

  6. 为你解惑之WPF经典9问详解

    本文解答了关于WPF的9个最常见的问题.从某种意义上讲,这两种技术是相互关联的:它们都是关于界面表现的技术,更进一步的,Silverlight是基于WPF的,是它的一个子集.不仅从理论上介绍了这两种技 ...

  7. linux 学习基础7之脚本的练习

    练习:传递一个用户名参数给脚本,判断此用户的用户名跟其基本组的组名是否一致,并将结果显示出来.写一个脚本:#!/bin/bashUSER=$1if [ !  $# -eq 1 ];then  echo ...

  8. 我所了解的meta

    https://github.com/hoosin/mobile-web-favorites 总况 meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). h ...

  9. hibernate----(Hql)另一种查询---利用Criteria类

    package com.etc.test; import java.util.List; import org.hibernate.Criteria;import org.hibernate.Sess ...

  10. sql附加数据库错误5120

    http://zhidao.baidu.com/link?url=p1o8EjUhn-RYFt1D4uIM-5HQF1oXZIRlPGaDiZ2FRMDzZDG1ooSARfkoPWG6SzTJTN6 ...