当前位置：首页 > 资讯 > 技术文档

javascript动态修改Li节点值的方法

时间：2020-11-16 04:41 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript动态修改Li节点值的方法

本文实例讲述了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程序设计有所帮助。

全部评论(0)

资讯排行榜
更多>>