编程 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 相关文章推荐

javascript之解决IE下不渲染的bug

Jun 29 Javascript

jQuery 插件仿百度搜索框智能提示(带Value值)

Jan 22 Javascript

node.js中的fs.renameSync方法使用说明

Dec 16 Javascript

jQuery实现html表格动态添加新行的方法

May 28 Javascript

jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

Mar 09 Javascript

JavaScript实现自动跳转文本功能

May 25 Javascript

three.js实现3D影院的原理的代码分析

Dec 18 Javascript

Vue中Quill富文本编辑器的使用教程

Sep 21 Javascript

layui实现数据表格table分页功能（ajax异步）

Jul 27 Javascript

在 Vue 中使用 JSX 及使用它的原因浅析

Feb 10 Javascript

浅析TypeScript 命名空间

Mar 19 Javascript

Vue接口封装的完整步骤记录

May 14 Vue.js

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