javascript动态修改Li节点值的方法


Posted in Javascript onJanuary 20, 2015

本文实例讲述了javascript动态修改Li节点值的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  

    <title>修改Li的值</title>  

    <script type="text/javascript">  

        function gel(id) {  

            return document.getElementById(id);  

        }  

          

        //全局的input输入控制  

        var inpt = document.createElement("input");  

        inpt.setAttribute("type", "text");  

  

        inpt.onblur = function() {  

            //alert("tet");  

            this.parentElement.innerHTML = inpt.value;  

        };  

  

        window.onload = function() {  

            var lis = gel("ulList").childNodes;  

            for (var i = 0; i < lis.length; i++) {  

                if (lis[i].nodeType == 1) {  

                    lis[i].ondblclick = function () {  

                        //删除文本  

                        inpt.value = this.innerHTML;  

                        this.removeChild(this.firstChild);  

                        this.appendChild(inpt);  

                        //获取焦点  

                        inpt.focus();  

                        //在inpt这个控件失去焦点的时候,也要绑定一个事件,把inpt中的文本值返回给当前li  

                        //编写inpt.onblur  

                    };  

                }  

            }  

        };  

    </script>  

</head>  

<body>  

    <ul id="ulList">  

        <li>北京</li>  

        <li>山西</li>  

        <li>上海</li>  

        <li>天津</li>  

        <li>河南</li>  

    </ul>  

</body>  

</html>

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

Javascript 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
JavaScript数组操作详解
Feb 04 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 #Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 #Javascript
js动态切换图片的方法
Jan 20 #Javascript
JavaScript 基本概念
Jan 20 #Javascript
自己动手手写jQuery插件总结
Jan 20 #Javascript
JavaScript学习心得之概述
Jan 20 #Javascript
DOM基础教程之使用DOM
Jan 19 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
mysql limit查询优化分析
2008/11/12 PHP
php zip文件解压类代码
2009/12/02 PHP
PHP 命名空间实例说明
2011/01/27 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
python 实现一个反向单位矩阵示例
2019/11/29 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
幼儿园教师节活动方案
2014/02/02 职场文书
结婚保证书范文
2014/04/29 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
灵山大佛导游词
2015/02/04 职场文书
社区服务活动报告
2015/02/05 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
作文之亲情600字
2019/09/23 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android