编程 Javascript

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程序设计有所帮助。

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Ajax执行顺序流程及回调问题分析

Dec 10 Javascript

Jquery网页出现的乱码问题的三种解决方法

Jun 30 Javascript

js实现广告漂浮效果的小例子

Jul 02 Javascript

JS实现仿中关村论坛评分后弹出提示效果的方法

Feb 23 Javascript

轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车

Nov 30 Javascript

BootStrap与Select2使用小结

Feb 17 Javascript

js遍历json对象所有key及根据动态key获取值的方法(必看)

Mar 09 Javascript

原生JS实现自定义滚动条效果

Oct 27 Javascript

JavaScript 点击触发复制功能实例详解

Nov 02 Javascript

Vue2 添加数据可视化支持的方法步骤

Jan 02 Javascript

javascript数据类型中的一些小知识点（推荐）

Apr 18 Javascript

vue 实现微信浮标效果

Sep 01 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