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>