jQuery HTML 操作 实例详解
jQuery 2022-05-31 17:45:19小码哥的IT人生shichen
jQuery HTML 操作
jQuery 包含很多供改变和操作 HTML 的强大函数。
改变 HTML 内容
语法
$(selector).html(content)
html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。
示例代码：
$("p").html("phpcodeweb");
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("phpcodeweb");
});
});
</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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
添加 HTML 内容
语法
$(selector).append(content)
append() 函数向所匹配的 HTML 元素内部追加内容。
语法
$(selector).prepend(content)
prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容。
示例代码：
$("p").append(" phpcodeweb");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
$(selector).after(content)
after() 函数在所有匹配的元素之后插入 HTML 内容。
语法
$(selector).before(content)
before() 函数在所有匹配的元素之前插入 HTML 内容。
示例代码：
$("p").after(" phpcodeweb.");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/skin/news/images/logo1.png" alt="phpcodeweb Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
jQuery HTML 操作 - 来自本页
| 函数 | 描述 |
|---|---|
| $(selector).html(content) | 改变被选元素的（内部）HTML |
| $(selector).append(content) | 向被选元素的（内部）HTML 追加内容 |
| $(selector).prepend(content) | 向被选元素的（内部）HTML “预置”（Prepend）内容 |
| $(selector).after(content) | 在被选元素之后添加 HTML |
| $(selector).before(content) | 在被选元素之前添加 HTML |
如需完整的参考手册，请访问我们的 jQuery HTML 操作参考手册。
