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

需要使用javaScript获取指定div中的内容来在javaScript中进行进一步的操作,那么,怎么使用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

关于这几个方法的运用,可以参考下文:

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

innerHTML、outerHTML、innerText、outerText的用法与区别 - js笔记

下面这个方法是获取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 - 有趣的演示

那么,在实际开发中有哪些用法呢?可参考下文:

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

怎么将qrcode.js生成二维码添加到网站上? - wordpress开发

国外主题

Milton - 多功能创意WordPress主题

2019-12-20 7:01:49

Woostroid - 多功用响应式WooCommerce模板

2019-12-21 7:01:26

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索