JQuery简略学习(7)——jQuery HTML 操作
日期：2014-05-17 浏览次数：20804 次
JQuery简单学习(7)——jQuery HTML 操作
?
jQuery 包含很多供改变和操作 HTML 的强大函数。
————————————————————
改变 HTML 内容
语法
$(selector).html(content)
?html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。
实例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3School");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
?————————————————————
添加 HTML 内容
语法
$(selector).append(content)
?append() 函数向所匹配的 HTML 元素内部追加内容。
语法
$(selector).prepend(content)?prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容。
实例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>W3School</b>.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
?语法
$(selector).after(content)?after() 函数在所有匹配的元素之后插入 HTML 内容。
语法
$(selector).before(content)
?before() 函数在所有匹配的元素之前插入 HTML 内容。
实例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" W3School.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
?————————————————————
jQuery HTML 操作 - 来自本页
函数
描述
$(selector).html(content)
改变被选元素的（内部）HTML
$(selector).append(content)
向被选元素的（内部）HTML 追加内容
$(selector).prepend(content)
向被选元素的（内部）HTML “预置”（Prepend）内容
$(selector).after(content)
在被选元素之后添加 HTML
$(selector).before(content)
在被选元素之前添加 HTML
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
