怎么使用javaScript獲取div的內容？ - js筆記

有時候我們需要使用javaScript獲取指定div中的內容來在javaScript中進行進一步的操作，那么，怎么使用javaScript獲取div的內容呢？這一節的js筆記來記錄下。

• 代碼來源：詳情

<div id="npcink_text">Npcink與你共享Javascript之美</div>
<script>
     var npcink_b = document.getElementById('npcink_text').outerText;
     document.write(npcink_b);
</script>

在PHP中需如下方法使用：

<div id="npcink_text">Npcink與你共享Javascript之美</div>
<script>
     var npcink_b = document.getElementById('npcink_text').innerText;
     document.write(npcink_b);
</script>

通過以上代碼即可方便的獲取到div中的內容，如果您想包含對象標簽本身，可以用 outerHTML

關于這幾個方法的運用，可以參考下文：

下面這個方法是獲取input 的value的值。

<input type="text"  id="npcink-id" value="Npcink與你分享代碼的美" style="display: none;" />  
<script language="javascript">  
     var npcink_a=document.getElementById("npcink-id").value;  
     document.write(npcink_a);
 </script>  

上面的內容是一個例子，其實就是捕獲input的vllue的值，然后將input隱藏起來而已。而且我還弄了個變量，方便各位在JS中調用。

如果你能用jquery.js的話，那么久更簡單了，各位可參考以下教程。

• 代碼參考：萬里冰封

前提是，我們需要先加載 jquery.js

<script type="text/javascript" src="./js/jquery.min.js"></script>

獲取選擇器內容：

核心：

$("#h-id").html();

演示：

<div id="h-id"><b>Npcink - 有趣的演示</b></div>
<script type="text/javascript">
	h_text = $("#h-id").html();    //賦值
	document.write(h_text);    //打印
</script>

打印的值為：

<b>Npcink - 有趣的演示</b>

獲取匹配選擇器文本

（不包含嵌入的HTML標簽）

核心

$("#t-id").text();

演示：

<div id="t-id"><b>Npcink - 有趣的演示</b></div>
<script type="text/javascript">
	t_text = $("#t-id").text();    //賦值
	document.write(t_text);    //打印
</script>

打印的值為：

Npcink - 有趣的演示

那么，在實際開發中有哪些用法呢？可參考下文：