JavaScript 在末尾添加节点案例

骑猪看日落 2021-06-24 16:10 380阅读 0赞

## 页面描述： ##

单击add按钮，在下方的无序列表中添加新的条目 **new** ，每点击一次，添加一条 **new** 。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]

## 分析： ##

*  先获取ul标签的ID。
    
        var ulobj = document.getElementById("ulid");
 *  创建新的li标签。
    
        var liob = document.createElement("li");
 *  创建新的文本。
    
        var wenbenob = document.createTextNode("new");
 *  把文本添加到li下面。
    
        liob.appendChild(wenbenob);
 *  把li添加到ul下面。
    
        ulobj.appendChild(liob);

## 代码： ##

<html>
    	<head>
    		<meta charset="utf-8" />
    	</head>
    
    	<body>
    		<input type="button" name="" id="" value="add" onclick="add1()" />
    		<ul id="ulid">
    			<li>old</li>
    			<li>old</li>
    			<li>old</li>
    		</ul>
    
    		<script type="text/javascript"> function add1() { // 获取ul的对象 var ulobj = document.getElementById("ulid"); // 新建一个li var liob = document.createElement("li"); // 新建文本 var wenbenob = document.createTextNode("new"); // 把文本添加到li下面。 liob.appendChild(wenbenob); // 把li添加到ul下面。 ulobj.appendChild(liob); } </script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/b88b4c5abf154f1884e1dd358d4e519a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，380人围观）

还没有评论，来说两句吧...

相关阅读

相关 js练习（五）在数组 arr 末尾添加元素push()、删除末尾元素pop()、从开头添加unshift()、从开头删除shift()

题目描述: **在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组 **push() 从数组的末尾插入一个元素 ...

谁践踏了优雅/ 2024年04月17日 22:24/ 0 赞/ 79 阅读

相关 Labview在Excel文件的末尾添加数据

步骤如下： 1. 配置LabVIEW以打开现有Excel文件。在LabVIEW中使用新建报表VI，并将 Excel作为报表类型，现有Excel文件的文件路径作为模板。

客官°小女子只卖身不卖艺/ 2024年03月27日 17:23/ 0 赞/ 77 阅读

相关 JavaScript创建、添加、删除、克隆节点

<body> <ul class="ul2"></ul> <script type="text/javascript"> var ul

￡神魔★判官ぃ/ 2023年07月13日 03:46/ 0 赞/ 36 阅读

相关纯 Javascript 插入节点：在末尾插入、在开始插入

在末尾插入节点： // Grab an element var el = document.getElementById('thingy'),

清疚/ 2023年07月12日 09:29/ 0 赞/ 16 阅读

相关前端学习笔记之创建节点与添加节点案例

发布留言案例实现一、案例分析二、实现过程三、完整代码一、案例分析 1. 核心思路：点击按钮之后，就动态创建 li，添加到 ul 里面；

柔光的暖阳◎/ 2023年02月19日 02:26/ 0 赞/ 23 阅读

相关 JavaScript节点操作--创建节点、添加节点、删除节点、复制节点

节点操作创建节点 document.createElement('tagName') document.createElement()方法创建由tagN

喜欢ヅ旅行/ 2022年12月23日 06:13/ 0 赞/ 248 阅读

相关 JavaScript经典案例：表格节点操作

效果展示: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

逃离我推掉我的手/ 2022年12月23日 03:22/ 0 赞/ 59 阅读

相关 JavaScript GET请求向 URL 末尾添加查询字符串参数

GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。对XHR而言，位于传人open

墨蓝/ 2022年06月14日 12:24/ 0 赞/ 282 阅读

相关向文件末尾添加内容

BufferedWriter out = null; try { out = new BufferedWriter(new FileWriter(”fi

绝地灬酷狼/ 2022年06月05日 00:19/ 0 赞/ 202 阅读

相关 JavaScript 在末尾添加节点案例

页面描述：单击add按钮，在下方的无序列表中添加新的条目 new ，每点击一次，添加一条 new 。 ![在这里插入图片描述][watermark_type_ZmF

骑猪看日落/ 2021年06月24日 16:10/ 0 赞/ 381 阅读