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

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

赞 (0)

相关推荐

  • JS 动态添加列表框项效果代码

    JS 动态添加列表框项效果代码

    *请选择1-3个知识点. 1213123123 2123123123 3213123213 4123213213 5213123213 6213123213 var addTo = document.getElementById("addto"); var moveBack = document.getElementById("moveback"); var selectLeft = document.getElementById("selectleft&

  • extjs 列表框(multiselect)的动态添加列表项的方法

    因为它这个是创建时自动加载的ArrayStore(关键字是:data: ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要根据第一个列表框内容动态的加载,因此要在选择第一个列表框的内容时,动态填充后两个的内容.我比较佩服exjts的示例写作人员,这些应该在示例中体现的功能,他们都没有写到,包括之前的2.2版本的示例,网上也没有搜索到,害我找了一天如何动态控制列表数据的功能.首先说明一下,我的方法也不是官方的方法,只是自己灵机一动想到的,下面是动态增加列表项的方法. 在方

  • javascript为下拉列表动态添加数据项

    javascript为下拉列表添加数据项.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>为下拉列表动态添加数据项<

  • JS动态的把左边列表添加到右边的实现代码(可上下移动)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

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

    本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my

  • javaScript动态添加Li元素的实例

    html代码块 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>**javaScript动态添加Li元素**</title> <style type="text/css"> ul li{list-style:none;display:block;text-align:left;} ul li span{displ

  • JS实现为动态添加的元素增加事件功能示例【基于事件委托】

    JS实现为动态添加的元素增加事件功能示例【基于事件委托】

    本文实例讲述了JS实现为动态添加的元素增加事件功能.分享给大家供大家参考,具体如下: 我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js动态添加事件</title>

  • JavaScript实现动态添加，删除行的方法实例详解

    本文实例讲述了JavaScript实现动态添加,删除行的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>增加Table行</title> </head> <script language="javascript

  • JavaScript动态添加style节点的方法

    本文实例讲述了JavaScript动态添加style节点的方法.分享给大家供大家参考.具体如下: var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if(style.styleSheet){ style.styleSheet.cssText =

  • JavaScript数组，JSON对象实现动态添加、修改、删除功能示例

    JavaScript数组，JSON对象实现动态添加、修改、删除功能示例

    本文实例讲述了JavaScript数组,JSON对象实现动态添加.修改.删除功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>javascript里面的数组,json对象,动态添加,修改,删除示例</t

  • 解决idea开发遇到javascript动态添加html元素时中文乱码的问题

    起因 一个几个月前做的小网站,这两天翻出来再看看,发现JavaScript文件中动态添加html元素中的中文乱码了,但是从后台获取的动态中文资源没问题,只有js文件中的静态中文资源,加载到网页中显示乱码 不要在意日期中年份部分的错误 过程 在网上看了很多博客,总结到最后就是要把tomcat.jsp.js.servlet的编码格式统一即可,但是我确定我早就将编码统一为utf-8 包括JavaScript文件的编码格式也多次重写为其他编码格式然后再次重写为utf-8,依然不行 结果 多次尝试无果,我

  • Js为表单动态添加节点内容的方法

    Js为表单动态添加节点内容的方法

    本文实例讲述了Js为表单动态添加节点内容的方法.分享给大家供大家参考.具体如下: 1. 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtm

  • JS如何实现动态添加的元素绑定事件

    JS如何实现动态添加的元素绑定事件

    这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断点击了哪个,然后做相应的操作,第二种是通过事件委托的原理来处理,事件委托将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项,这种更

  • jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 具体不多说了,请看下面的代码吧. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

随机推荐