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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
Node.js文件操作详解
Aug 16 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
原生js实现选项卡功能
Mar 08 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 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获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
vue axios登录请求拦截器
2018/04/02 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Python程序暂停的正常处理方法
2019/11/07 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
银行办公室岗位职责
2014/03/10 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
理财计划书
2014/08/14 职场文书
安全生产年活动总结
2014/08/29 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP