快捷導(dǎo)航

父節(jié)點獲取子節(jié)點的字符串示例代碼

更新時間：2014年02月26日 16:32:07 作者：

這篇文章主要介紹了父節(jié)點獲取子節(jié)點的字符串的方法,需要的朋友可以參考下

1、JavaScript方法：document.getElementById("id").innerHTML;

（1）實例說明

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>獲取HTML中的子項</title> 
<script type="text/javascript"> 
function getStr() 
{ 
var str = document.getElementById("div_child").innerHTML; 
alert(str); 
} 
</script> 
</head> 

<body> 
<div id="div_child"> 
<table> 
<tr> 
<th></th> 
<th></th> 
<th></th> 
<th></th> 
<th></th> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
</table> 
<input type="button" id="btn" onclick="getStr()" value="獲取字符串"/> 
</div> 
</body> 
</html> 

（2）點擊按鈕后，彈出信息

2、jQuery中的方法：$("#id").html()

（1）實例說明

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery中父節(jié)點獲取子節(jié)點字符串</title> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("#btn").click(function(){ 
var str = $("#div_child").html(); 
alert(str); 
}); 
}); 
</script> 
</head> 

<body> 
<div id="div_child"> 
<table> 
<tr> 
<th></th> 
<th></th> 
<th></th> 
<th></th> 
<th></th> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
</table> 
<input type="button" id="btn" value="獲取值"/> 
</div> 
</body> 
</html> 

（2）運行結(jié)果

相關(guān)文章

讓div層隨鼠標(biāo)移動的實現(xiàn)代碼 ie ff
隨鼠標(biāo)移動的div層使用ie ff ，大家可以注意下兼容性的問題。
2009-12-12
JavaScript 實現(xiàn)拖拽效果組件功能(兼容移動端)
這篇文章主要介紹了JavaScript 實現(xiàn)拖拽效果組件功能(兼容移動端),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-11
javascript實現(xiàn)拖拽并替換網(wǎng)頁塊元素
實現(xiàn)類似于學(xué)生換座位的效果，將網(wǎng)頁內(nèi)的兩個元素通過拖拽的方式互換。
2009-11-11
前端在瀏覽器端播放直播流協(xié)議的2種方式講解
直播依賴錄播所需要的播放技術(shù),同時依賴HTTP FLV或者WebSocket中的一種協(xié)議來傳輸FLV,這篇文章主要給大家介紹了關(guān)于前端在瀏覽器端播放直播流協(xié)議的2種方式,需要的朋友可以參考下
2024-07-07
js將類數(shù)組對象轉(zhuǎn)換成數(shù)組對象
javascript與dom有許多瑕疵，如著名的類數(shù)組對象Arguments，其他諸如HTMLCollection,NodeList如果它們都是數(shù)組的子類，那多省時啊。
2010-05-05
javascript搜索框效果實現(xiàn)方法
這篇文章主要介紹了javascript搜索框效果實現(xiàn)方法,可實現(xiàn)顯示默認(rèn)提示文字的搜索框效果,非常簡單實用,需要的朋友可以參考下
2015-05-05
JavaScript 五大常見函數(shù)
在javascript前端開發(fā)中js函數(shù)問題經(jīng)常會被討論，這個問題仁者見仁智者見智，下面通過示例代碼給大家介紹js五大常見函數(shù)，感興趣的朋友一起看看吧
2018-03-03
JavaScript編程設(shè)計模式之構(gòu)造器模式實例分析
這篇文章主要介紹了JavaScript編程設(shè)計模式之構(gòu)造器模式,簡單講述了構(gòu)造器模式的概念、原理,并結(jié)合實例形式分析了構(gòu)造器模式的定義與使用方法,需要的朋友可以參考下
2017-10-10
js實現(xiàn)抽獎效果
本文主要介紹了js實現(xiàn)抽獎效果的方法實例。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
js判斷鼠標(biāo)移入移出方向的方法
這篇文章主要為大家詳細(xì)介紹了js判斷鼠標(biāo)移入移出方向的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06