手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript动态修改Li节点值的方法
javascript动态修改Li节点值的方法
摘要:本文实例讲述了javascript动态修改Li节点值的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:修改Li的值funct...

本文实例讲述了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动态修改Li节点值的方法】相关文章:

JavaScript对表格或元素按文本,数字或日期排序的方法

Javascript节点关系实例分析

JavaScript中的splice()方法使用详解

javascript实现查找数组中最大值方法汇总

javascript正则表达式总结

在JavaScript中使用开平方根的sqrt()方法

javascript检测两个数组是否相似

理解javascript定时器中的单线程

Javascript实现div层渐隐效果的方法

Javascript动态创建表格及删除行列的方法

精品推荐
分类导航