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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
vue源码解析之事件机制原理
Apr 21 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
react国际化react-intl的使用
May 06 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 memcache扩展的三种安装方法
2009/04/26 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
ExtJS 入门
2010/10/29 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
vuex与组件联合使用的方法
2018/05/10 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python3.8中使用f-strings调试
2019/05/22 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
C#笔试题
2015/07/14 面试题
技校毕业生自荐书
2014/05/23 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL