Npcink Blog
切换菜单

怎么使用 javaScript 获取 div 的内容？ - js 笔记

需要使用 javaScript 获取指定 div 中的内容来在 javaScript 中进行进一步的操作，那么，怎么使用 javaScript 获取 div 的内容呢？这一节的 js 笔记来记录下

最后更新于
本页目录2 节

有时候我们需要使用 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 - 有趣的演示

那么，在实际开发中有哪些用法呢？可参考下文：