首页 web前端 js教程 JavaScript实现向OL列表内动态添加LI元素的方法_javascript技巧

JavaScript实现向OL列表内动态添加LI元素的方法_javascript技巧

May 16, 2016 pm 04:08 PM
javascript 动态添加 方法

本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法。分享给大家供大家参考。具体分析如下:

JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI

<script type="text/javascript">
function addItem() {
 var myitem = document.getElementById("ItemToAdd").value;
 var mylistItems = document.getElementById("mylist");
 var newP = document.createElement("li");
 var textNode = document.createTextNode(myitem);
 newP.appendChild(textNode);
 document.getElementById("mylist").appendChild(newP);
 return false;
}
</script>
<form onsubmit="return addItem()" action="#">
<span>Grocery Items:</span>
<input type="text" id="ItemToAdd" value="Milk" />
<input type="button" value="Add" onclick="addItem()" />
</form>
<span>Grocery List:</span>
<ol id="mylist"></ol>
登录后复制

希望本文所述对大家的javascript程序设计有所帮助。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

怎么在番茄免费小说app中写小说 分享番茄小说写小说方法教程 怎么在番茄免费小说app中写小说 分享番茄小说写小说方法教程 Mar 28, 2024 pm 12:50 PM

怎么在番茄免费小说app中写小说 分享番茄小说写小说方法教程

怎么删除微信好友?删除微信好友的方法 怎么删除微信好友?删除微信好友的方法 Mar 04, 2024 am 11:10 AM

怎么删除微信好友?删除微信好友的方法

七彩虹主板怎么进入bios?教你两种方法 七彩虹主板怎么进入bios?教你两种方法 Mar 13, 2024 pm 06:01 PM

七彩虹主板怎么进入bios?教你两种方法

微信删除的人如何找回(简单教程告诉你如何恢复被删除的联系人) 微信删除的人如何找回(简单教程告诉你如何恢复被删除的联系人) May 01, 2024 pm 12:01 PM

微信删除的人如何找回(简单教程告诉你如何恢复被删除的联系人)

Win11管理员权限获取方法汇总 Win11管理员权限获取方法汇总 Mar 09, 2024 am 08:45 AM

Win11管理员权限获取方法汇总

快速掌握:华为手机开启两个微信账号方法大揭秘! 快速掌握:华为手机开启两个微信账号方法大揭秘! Mar 23, 2024 am 10:42 AM

快速掌握:华为手机开启两个微信账号方法大揭秘!

Oracle版本查询方法详解 Oracle版本查询方法详解 Mar 07, 2024 pm 09:21 PM

Oracle版本查询方法详解

手机版龙蛋孵化方法大揭秘(一步一步教你如何成功孵化手机版龙蛋) 手机版龙蛋孵化方法大揭秘(一步一步教你如何成功孵化手机版龙蛋) May 04, 2024 pm 06:01 PM

手机版龙蛋孵化方法大揭秘(一步一步教你如何成功孵化手机版龙蛋)

See all articles