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 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
JS面向对象编程详解
Mar 06 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
Vue根据条件添加click事件的方式
Nov 09 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读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP会话处理的10个函数
2015/08/11 PHP
如何在PHP中生成随机数
2020/06/04 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
基于Django统计博客文章阅读量
2019/10/29 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
python Selenium 库的使用技巧
2020/10/16 Python
Python基于Faker假数据构造库
2020/11/30 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
物业门卫岗位职责
2013/12/28 职场文书
将相和教学反思
2014/02/04 职场文书
邓小平理论心得体会
2014/09/09 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Javascript 解构赋值详情
2021/11/17 Javascript