javascript動(dòng)態(tài)修改Li節(jié)點(diǎn)值的方法
更新時(shí)間：2015年01月20日 10:02:23 投稿：shichen2014
這篇文章主要介紹了javascript動(dòng)態(tài)修改Li節(jié)點(diǎn)值的方法,涉及針對(duì)li節(jié)點(diǎn)的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javascript動(dòng)態(tài)修改Li節(jié)點(diǎn)值的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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);
//獲取焦點(diǎn)
inpt.focus();
//在inpt這個(gè)控件失去焦點(diǎn)的時(shí)候，也要綁定一個(gè)事件,把inpt中的文本值返回給當(dāng)前l(fā)i
//編寫(xiě)inpt.onblur
};
}
}
};
</script>
</head>
<body>
<ul id="ulList">
<li>北京</li>
<li>山西</li>
<li>上海</li>
<li>天津</li>
<li>河南</li>
</ul>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
uniapp獲取當(dāng)前位置及檢測(cè)授權(quán)狀態(tài)效果
這篇文章主要介紹了uniapp獲取當(dāng)前位置及檢測(cè)授權(quán)狀態(tài)效果,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
獲取JS中網(wǎng)頁(yè)各種高寬與位置的方法總結(jié)
本文詳細(xì)羅列了如何在javascript獲取網(wǎng)頁(yè)各種高寬及位置，內(nèi)容比較全面，有需要的可以參考一下。2016-07-07
JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法
這篇文章介紹了JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了js實(shí)現(xiàn)3D照片墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
現(xiàn)在有這樣一個(gè)問(wèn)題,由于一些原因,我們經(jīng)常需要修改gTool的代碼然后上傳更新cdn,但是用戶通過(guò) html 文件訪問(wèn)的 gTool 鏈接實(shí)際上還是緩存的,所以現(xiàn)在問(wèn)題就是如何禁止緩存,文中給大家介紹了三個(gè)方法供大家參考,需要的朋友可以參考下2024-01-01
JavaScript股票的動(dòng)態(tài)買(mǎi)賣(mài)規(guī)劃實(shí)例分析下篇
這篇文章主要介紹了JavaScript對(duì)于動(dòng)態(tài)規(guī)劃解決股票問(wèn)題的真題例舉講解。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
javascript基礎(chǔ)知識(shí)之html5輪播圖實(shí)例講解（44）
這篇文章主要為大家詳細(xì)介紹了javascript基礎(chǔ)知識(shí)之html5輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了js調(diào)用設(shè)備攝像頭的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
js的繼承機(jī)制不同于傳統(tǒng)的面向?qū)ο笳Z(yǔ)言,采用原型鏈實(shí)現(xiàn)繼承,基本思想是利用原型讓一個(gè)引用類(lèi)型繼承另一個(gè)引用類(lèi)型的屬性和方法,下面這篇文章主要給大家介紹了關(guān)于JS繼承的相關(guān)資料,需要的朋友可以參考下2021-09-09
原生js實(shí)現(xiàn)表格翻頁(yè)和跳轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格翻頁(yè)和跳轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09