JavaScript实现向OL列表内动态添加LI元素的方法
更新时间：2015年03月21日 11:17:19 作者：work24
这篇文章主要介绍了JavaScript实现向OL列表内动态添加LI元素的方法,实例分析了javascript操作html元素的技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要为大家详细解析了js插件dropload上拉下滑加载数据实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了JS Array.slice 截取数组的实现方法,因为我们需要控制一下长度，需要的朋友可以参考下2016-01-01
本文主要介绍了javascript函数的4种调用方式与this（上下文）的指向，文中有详细的代码示例，感兴趣的同学可以参考阅读一下2023-05-05
因为通常选择器需要遍历整个元素树，所以当多次选择会比较耗时，忽然想到是否能利用setTimeout将多次选择操作归并到一起2011-01-01
作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域示例详解的介绍，非常不错，感兴趣的朋友一起看下吧2016-07-07
javascript中setAttribute兼容性用法分析
这篇文章主要介绍了javascript中setAttribute兼容性用法,结合实例形式分析了javascript使用setAttribute进行属性设置操作的相关使用技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JS面向对象编程对象和构造函数,结合实例形式详细分析了JS面向对象编程对象和构造函数具体概念、原理、使用方法及操作注意事项,需要的朋友可以参考下2020-03-03
javascript设计模式 – 中介者模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 中介者模式,结合实例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
javascript设计模式 – 解释器模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 解释器模式,结合实例形式分析了javascript解释器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
JavaScript（简称“JS”）是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,本文主要为大家介绍了JavaScript中三种常见引入方式,希望对大家有所帮助2024-01-01
最新评论