1. 教程
  2. jQuery 教程
  3. jQuery 插入内容

jQuery 插入内容

Created: October-14, 2018

在本教程中，你将学习如何使用 jQuery 将新元素或内容插入到文档中。

jQuery 插入新内容

jQuery 提供了几种方法，比如 append()、prepend()、html()、text()、before()、after() 和 wrap() 等，使我们能够插入现有元素中的新内容。

jQuery html() 和 text() 方法已在前一章中介绍过，因此在本章中，我们将讨论其余的内容。

jQuery append() 方法

jQuery append() 方法用于将内容插入所选元素的末尾。

以下示例将向文档就绪的所有段落附加一些 HTML，而在按钮单击时将一些文本附加到容器元素。

<script type="text/javascript">
$(document).ready(function(){
    // Append all paragraphs
    $("p").append(' <a href="#">read more...</a>');
    
    // Append an element with ID container
    $("button").click(function(){
       $("#container").append("This is demo text.");
    });
});
</script>

注意： 使用 jQuery append() 和 prepend() 方法插入的内容或元素将添加到所选元素中。

jQuery prepend() 方法

prepend() 方法用于将内容插入所选元素的开头。

以下示例将在文档准备好的所有段落之前添加一些 HTML，而在按钮单击时将一些文本添加到容器元素。

<script type="text/javascript">
$(document).ready(function(){
    // Prepend all paragraphs
    $("p").prepend("<strong>Note:</strong> ");
    
    // Prepend an element with ID container
    $("button").click(function(){
       $("#container").prepend("This is demo text.");
    });
});
</script>

使用 append() 和 prepend() 方法插入多个元素

jQuery append() 并且 prepend() 还支持传入多个参数作为输入。

在下面的示例中的 jQuery 代码将在 <body> 元素内插入 <h1>、<p> 和 <img> 元素来作为最后的三个子节点元素。

<script type="text/javascript">
$(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 type="text/javascript">
$(document).ready(function(){
    // Add content before an element with ID container
    $("#container").before("<p>&mdash; The Beginning &mdash;</p>");
    
    // Add content before headings
    $("button").click(function(){
        $("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
    });
});
</script>

注意： 使用 jQuery before() 和 after() 方法插入的内容或元素将添加到所选元素之外。

jQuery after() 方法

jQuery after() 方法用于在所选元素之后插入内容。

以下示例将在文档就绪的容器元素之后插入一个段落，而在按钮单击上的 <h1> 元素之后插入一个图像。

<script type="text/javascript">
$(document).ready(function(){
    // Add content after an element with ID container
    $("#container").after("<p>&mdash; The End &mdash;</p>");
    
    // Add content after headings
    $("button").click(function(){
        $("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
    });
});
</script>

使用 before() 和 after() 方法插入多个元素

jQuery before() 和 after() 还支持传入多个参数作为输入。下面的例子将在 <p> 元素之前插入 <h1>、<p> 和 <img> 。

<script type="text/javascript">
$(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 结构。

下面的示例将在文档就绪后使用类 .wrapper 将整个容器元素包装在 <div> 元素内，首先使用 <b> 元素包装段元素的所有内部内容，然后再用 <em> 元素来。

<script type="text/javascript">
$(document).ready(function(){
    // Wrap elements with class container with HTML
    $(".container").wrap('');
    
    // Wrap paragraph's content with HTML
    $("button").click(function(){
        $("p").contents().wrap("<em><b></b></em>");
    });
});
</script>