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 String 对象
Apr 25 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
js单例模式的两种方案
2013/10/22 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
药品营销专业毕业生自荐信
2014/07/02 职场文书
班级体育活动总结
2014/07/05 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers