本文通过具体代码示例，演示了如何使用原生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程序设计有所帮助。