• jQuery Video Tutorials

jQuery - 新增元素

上一頁
下一頁

jQuery 提供了各種方法來在現有的 HTML 文件中新增新的 DOM 元素。您可以根據需要將這些新元素新增到各種位置（在現有標籤之前、之後）。

jQuery append() 方法

jQuery 的 append() 方法將內容新增到匹配的每個元素的末尾。您也可以在單個函式呼叫中追加多個元素。

以下是 append() 方法的語法

$(selector).append(content, [content]);

這裡 content 引數可以是 HTML 字串、DOM 元素、文字節點、元素和文字節點陣列或 jQuery 物件，用於插入到匹配元素集中每個元素的末尾。

摘要

考慮以下 HTML 內容

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

現在，如果我們應用 append() 方法如下

$( ".inner" ).append( "<p>Zara</p>" );

它將產生以下結果

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello
   <p>Zara</p>
   </div>
   <div class="inner">Goodbye
   <p>Zara</p>
   </div>
</div>

示例

讓我們嘗試以下示例並驗證結果

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").append("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery append() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery appendTo() 方法

jQuery 的 appendTo() 方法執行與 append() 相同的任務。主要區別在於語法，特別是在內容和目標的位置。

以下是 appendTo() 方法的語法

$(content).appendTo(selector);

這裡 content 引數可以是 HTML 字串、DOM 元素、文字節點、元素和文字節點陣列或 jQuery 物件，用於插入到匹配元素集中每個元素的末尾。

示例

讓我們嘗試以下示例並驗證結果

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").appendTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery appendTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery after() 方法

jQuery 的 after() 方法將內容新增到匹配的每個元素之後。您也可以在單個函式呼叫中插入多個元素。

以下是 after() 方法的語法

$(selector).after(content, [content]);

這裡 content 引數可以是 HTML 字串、DOM 元素、文字節點、元素和文字節點陣列或 jQuery 物件，用於插入到匹配元素集中每個元素的末尾。

摘要

考慮以下 HTML 內容

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

現在，如果我們應用 after() 方法如下

$( ".inner" ).after( "<p>Zara</p>" );

它將產生以下結果

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <p>Zara</p>
   <div class="inner">Goodbye</div>
   <p>Zara</p>
</div>

示例

讓我們嘗試以下示例並驗證結果

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").after("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery after() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery insertAfter() 方法

jQuery 的 insertAfter() 方法將內容新增到匹配的每個元素之後。after() 和 insertAfter() 方法執行相同的任務。主要區別在於語法，特別是在內容和目標的位置。

以下是 after() 方法的語法

$(content).insertAfter(selector);

這裡 content 引數可以是 HTML 字串、DOM 元素、文字節點、元素和文字節點陣列或 jQuery 物件，用於插入到匹配元素集中每個元素的末尾。

示例

讓我們嘗試以下示例並驗證結果

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").insertAfter(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertAfter() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery prepend() 方法

jQuery 的 prepend() 方法將內容新增到匹配的每個元素的開頭。您也可以在單個函式呼叫中預先新增多個元素。

以下是 append() 方法的語法

$(selector).prepend(content, [content]);

這裡 content 引數可以是 HTML 字串、DOM 元素、文字節點、元素和文字節點陣列或 jQuery 物件，用於插入到匹配元素集中每個元素的末尾。

摘要

考慮以下 HTML 內容

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

現在，如果我們應用 prepend() 方法如下

$( ".inner" ).prepend( "<p>Zara</p>" );

它將產生以下結果

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">
   <p>Zara</p>
   Hello
   </div>
   <div class="inner">
   <p>Zara</p>
   Goodbye
   </div>
</div>

示例

讓我們嘗試以下示例並驗證結果

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").prepend("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prepend() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery prependTo() 方法

jQuery 的 prependTo() 方法執行與 prepend() 相同的任務。主要區別在於語法，特別是在內容和目標的位置。

以下是 prependTo() 方法的語法

$(content).prependTo(selector);

這裡 content 引數可以是 HTML 字串、DOM 元素、文字節點、元素和文字節點陣列或 jQuery 物件，用於插入到匹配元素集中每個元素的末尾。

示例

讓我們嘗試以下示例並驗證結果

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").prependTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prependTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery before() 方法

jQuery 的 before() 方法將內容新增到匹配的每個元素之前。您也可以在單個函式呼叫中插入多個元素。

以下是 before() 方法的語法

$(selector).before(content, [content]);

這裡 content 引數可以是 HTML 字串、DOM 元素、文字節點、元素和文字節點陣列或 jQuery 物件，用於插入到匹配元素集中每個元素的末尾。

摘要

考慮以下 HTML 內容

<div class="container">
   <h2>jQuery before() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

現在，如果我們應用 before() 方法如下

$( ".inner" ).before( "<p>Zara</p>" );

它將產生以下結果

<div class="container">
   <h2>jQuery before() Method</h2>
   <p>Zara</p>
   <div class="inner">Hello</div>
   <p>Zara</p>
   <div class="inner">Goodbye</div>
</div>

示例

讓我們嘗試以下示例並驗證結果

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").before("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery before() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery insertBefore() 方法

jQuery 的 insertBefore() 方法將內容新增到匹配的每個元素之前。before() 和 insertBefore() 方法執行相同的任務。主要區別在於語法，特別是在內容和目標的位置。

以下是 after() 方法的語法

$(content).insertBefore(selector);

這裡 content 引數可以是 HTML 字串、DOM 元素、文字節點、元素和文字節點陣列或 jQuery 物件，用於插入到匹配元素集中每個元素的末尾。

示例

讓我們嘗試以下示例並驗證結果

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").insertBefore(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertBefore() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery HTML/CSS 參考

您可以在以下頁面獲取所有 jQuery 方法以操作 CSS 和 HTML 內容的完整參考：jQuery HTML/CSS 參考。

列印頁面
上一頁
下一頁
廣告