JavaScript与jQuery获取DIV内容的方法示例
作者:流萤时间:2026-10-21 23:19:13浏览:168
本文通过具体代码示例,演示了如何使用原生JavaScript和jQuery两种方式获取HTML中DIV元素的内容。文章包含完整的HTML结构、脚本逻辑及运行结果截图,旨在帮助开发者快速掌握这两种常见前端技术中针对特定元素内容的提取方法。
JavaScript与jQuery获取DIV内容的方法示例
本文通过具体代码示例,演示了如何使用原生JavaScript和jQuery两种方式获取HTML中DIV元素的内容。
具体实现代码如下:
<!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>JavaScript和JQuery获取DIV的值</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#jqueryInput").click(function(){
var divValue = $("#div_val").text();
var divVal = $("#div_val").html();
alert("JQuery获取DIV的值:"+divValue+"\n"+divVal);
});
});
function javaScriptDiv()
{
var divVal = document.getElementById("div_val").innerHTML;
alert("JavaScript获取DIV的值:"+divVal);
}
</script>
</head>
<body>
<div id="div_val">www.jb51.net</div>
<input type="button" value="JavaScript获取DIV的值" onclick="javaScriptDiv()"/>
<input type="button" value="JQuery获取DIV的值" id="jqueryInput"/>
</body>
</html>
程序运行后的效果如下所示:
(1)页面初始加载状态

(2)点击“JavaScript获取DIV的值”按钮后的状态

(3)点击“jQuery获取DIV的值”按钮后的状态

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
作者最新文章
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件:addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别:运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址:GitHub Release 获取预编译包
2026-11-04 23:07:27
