1、JQuery 改變p中的文本值
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("Update text");
});
});
</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 here</button>
</body>
</html>
2、JQuery 添加p中的文本值
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" Append text");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">請點擊這里</button>
</body>
</html>
3、after() 函數在所有匹配的元素之后插入 HTML 內容
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" Add content.");
});
});
</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 here</button>
</body>
</html>
4、jQuery HTML 操作
| 函數 | 描述 |
|---|---|
| $(selector).html(content) | 改變被選元素的（內部）HTML |
| $(selector).append(content) | 向被選元素的（內部）HTML 追加內容 |
| $(selector).prepend(content) | 向被選元素的（內部）HTML “預置”（Prepend）內容 |
| $(selector).after(content) | 在被選元素之后添加 HTML |
| $(selector).before(content) | 在被選元素之前添加 HTML |