jQuery 插入 内容
在本教程中，您将学习如何使用 jQuery 向文档中插入新元素或内容。
jQuery插入新内容
jQuery 提供了几种方法，例如 append(), prepend(), html(), text(), before(), after(), wrap() 等，允许我们在现有元素中插入新内容。
jQuery 的 html() 和 text() 方法已经在前一章中介绍过，所以在本章中，我们将讨论其余的方法。
jQuery append() 方法
jQuery append() 方法用于将内容插入到所选元素的末尾。
以下示例将在文档就绪的所有段落中附加一些 HTML，而在按钮单击时将一些文本附加到容器元素。
<script>
$(document).ready(function(){
// 附加所有段落
$("p").append(' <a href="#">read more...</a>');
// 附加一个带有 ID 容器的元素
$("button").click(function(){
$("#container").append("This is demo text.");
});
});
</script>注意： 使用 jQuery 的 append() 和 prepend() 方法插入的内容或元素被添加到所选元素的内部。
jQuery prepend() 方法
prepend() 方法用于将内容插入到所选元素的开头。
以下示例将在文档准备好的所有段落中添加一些 HTML，而在单击按钮时将一些文本添加到容器元素中。
<script>
$(document).ready(function(){
// 前置所有段落
$("p").prepend("<strong>Note:</strong> ");
// 在元素前添加 ID 容器
$("button").click(function(){
$("#container").prepend("This is demo text.");
});
});
</script>使用 append() & 插入多个元素 prepend() 方法
jQuery append() 和 prepend() 还支持传入多个参数作为输入。
以下示例中的 jQuery 代码将在 <body> 元素内插入一个 <h1>, <p> 和一个 <img> 元素作为最后三个子节点。
<script>
$(document).ready(function(){
var newHeading = "<h1>Important Note:</h1>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
var newImage = $('<img src="images/smiley.png" alt="Symbol">');
$("body").append(newHeading, newParagraph, newImage);
});
</script>jQuery before() 方法
jQuery before() 方法用于在所选元素之前插入内容。
下面的示例将在文档准备好的容器元素之前插入一个段落，而在按钮单击时在 <h1> 元素之前插入一个图像。
<script>
$(document).ready(function(){
// 在带有 ID 容器的元素之前添加内容
$("#container").before("<p>— The Beginning —</p>");
// 在标题前添加内容
$("button").click(function(){
$("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
});
});
</script>注意： 使用 jQuery before() 和 after() 方法插入的内容或元素被添加到所选元素之外。
jQuery after() 方法
jQuery after() 方法用于在选定元素之后插入内容。
下面的示例将在文档准备好的容器元素之后插入一个段落，而在按钮单击时在 <h1> 元素之后插入一个图像。
<script>
$(document).ready(function(){
// 在带有 ID 容器的元素之后添加内容
$("#container").after("<p>— The End —</p>");
// 在标题后添加内容
$("button").click(function(){
$("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
});
});
</script>使用 before() & 插入多个元素 after() 方法
jQuery before() 和 after() 也支持传入多个参数作为输入。 以下示例将在 <p> 元素之前插入 <h1>, <p> 和 <img> 元素。
<script>
$(document).ready(function(){
var newHeading = "<h2>Important Note:</h2>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
var newImage = $('<img src="images/smiley.png" alt="Symbol">');
$("p").before(newHeading, newParagraph, newImage);
});
</script>jQuery wrap() 方法
jQuery wrap() 方法用于将 HTML 结构包裹在所选元素周围。
以下示例中的 jQuery 代码将使用 <div> 元素包装容器元素，并在文档就绪时使用类 .wrapper, 而首先用 <b> 和 <em> 元素包装段落元素的所有内部内容。
<script>
$(document).ready(function(){
// 用类容器用 HTML 包装元素
$(".container").wrap('<div class="wrapper"></div>');
// 用 HTML 包裹段落的内容
$("button").click(function(){
$("p").contents().wrap("<em><b></b></em>");
});
});
</script>