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


Posted in Javascript onMarch 21, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
js的写法基础分析
Jan 17 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
vue实现搜索过滤效果
May 28 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 #Javascript
JavaScript动态加载样式表的方法
Mar 21 #Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 #Javascript
JavaScript删除数组元素的方法
Mar 20 #Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 #Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 #Javascript
JS定义网页表单提交(submit)的方法
Mar 20 #Javascript
You might like
PHP开发入门教程之面向对象
2006/12/05 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php动态绑定变量的用法
2015/06/16 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
公益活动邀请函
2014/02/05 职场文书
活动策划邀请函
2014/02/06 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
邹越演讲观后感
2015/06/15 职场文书
获奖感言一句话
2015/07/31 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js