如何使用 JavaScript 組合多個元素並將結果附加到 div 中？-js教程-PHP中文網

首頁

web前端

js教程

如何使用 JavaScript 組合多個元素並將結果附加到 div 中？

PHPz

Sep 08, 2023 pm 02:37 PM

如何使用 JavaScript 组合多个元素并将结果附加到 div 中？

有時，我們需要使用 JavaScript 來操作 HTML 元素。因此，我們可以使用 JavaScript 來新增或刪除 HTML 元素。本教學將教我們使用 JavaScript 在一個鏡頭中組合多個 HTML 元素。

有時我們需要在使用者點擊按鈕或特定事件觸發器時向他們顯示一些 HTML 元素。因此，我們可以使用下面的方法來組合多個元素，並使用 JavaScript 將結果附加到 div 元素中。

使用innerHTML屬性

innerHTML，顧名思義，允許我們使用 JavaScript 設定任何特定元素的 HTML。將賦值運算子與 innerHTML 屬性一起使用會取代特定元素的 HTML。

當我們將 = 運算子與 innerHTML 屬性一起使用時，我們可以將多個元素附加到特定的 HTML 元素。

文法

您可以依照下列語法使用innerHTML屬性組合多個元素並將它們附加到div元素。

test_div.innerHTML += html;

在上述語法中，test_div 是透過 JavaScript 存取的 HTML 元素。

範例

在下面的範例中，我們將進行五次 for 迴圈迭代。我們使用innerHTML 屬性在每次循環迭代中將一些HTML 附加到div 元素。

<html>
<head>
   <style>
      button {
         font-size: 1.3rem;
         background-color: aqua;
         border-radius: 10px;
         color: blue;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h3 id="Using-the-i-innerHTML-property-i-to-append-multiple-HTML-elements-to-the-particular-HTML-element">Using the <i> innerHTML property </i> to append multiple HTML elements to the particular HTML element</h3>
   <div id = "test_div"> This is the HTML div element.</div>
   <button onclick = "appendEle()"> Append elements</button>
   <script>
      function appendEle() {
         let test_div = document.getElementById("test_div");
         for (let i = 0; i < 5; i++) {
            test_div.innerHTML += "<p> digit is " + i + " </p>";
         }
      }
   </script>
</body>
</html>

使用JQuery的append()方法

我們可以使用 JQuery 的append()方法將HTML附加到特定元素。我們可以多次使用append()方法將多個元素附加到特定的HTML元素。

文法

使用者可以依照下面的語法使用jQuery的append()方法將多個HTML元素附加到特定的HTML元素。

$('#content').append(html)

在上面的語法中，html 是一行 html，包含多個或單一元素，要附加在 HTML 元素的末尾。

範例

在下面的範例中，當使用者點擊按鈕時，它會呼叫appendHTML() 函數。在appendHTML() 函數中，我們使用迴圈將多個HTML 元素附加到特定元素。使用者可以看到我們使用 JQuery append() 方法在每次循環迭代中附加新的 HTML 元素。

<html>
<head>
   <style>
      div {
         font-size: 1.5rem;
         background-color: yellow;
         color: black;
         width: 250px;
      }
   </style>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
   <h3 id="Using-the-i-JQuery-append-i-method-to-append-multiple-HTML-elements-to-the-particular-HTML-element">Using the <i>JQuery append()</i> method to append multiple HTML elements to the particular HTML element </h3>
   <div id = "content"> testing content. </div><br>
   <button onclick = "appendHTML()"> Append elements </button>
   <script>
      function appendHTML() {
         for (let i = 0; i < 10; i++) {
            $('#content').append('<div> This div is appended! </div>')
          }
      }
   </script>
</body>
</html>

在上面的輸出中，使用者可以觀察到，當使用者點擊按鈕時，它會將 HTML 元素附加到 id 為「content」的 div 元素中。

使用 JavaScript 的 after() 方法

JavaScript 包含 after() 方法，用於在特定元素後面新增 HTML 元素。我們可以透過逗號分隔的行 HTML 或在 JavaScript 中建立後的元素作為 after() 方法的參數傳遞。

文法

使用者可以按照下面的語法使用 JavaScript 的 after() 方法將多個元素附加到 HTML 元素，而不是將它們組合成單一元素。

div_Element.after(elements);

參數

elements - 它們是多個以逗號分隔的 html 元素，新增在特定 HTML 元素之後。

範例

在下面的範例中，concatElements() 函數在使用者點擊按鈕時執行。在 concatElements() 函數中，我們使用 createElement() 方法建立 HTML 元素，並使用innerHTML 屬性向其中新增 html。

之後，我們將 element1 和 element2 作為 after() 方法的參數傳遞，以將它們附加到 div 元素之後。

<html>
<head>
   <style>
      div {
         font-size: 1.5rem;
         background-color: yellow;
         color: black;
         width: 250px;
      }
      p {
         font-size: 1rem;
         background-color: blue;
         color: white;
         width: 250px;
         padding: 5px;;
      }
   </style>
</head>
<body>
   <h3 id="Using-the-i-after-i-method-to-append-multiple-HTML-elements-to-the-particular-HTML-element">Using the <i>after()</i> method to append multiple HTML elements to the particular HTML element</h3>
   <div id = "content"> testing content. </div>
   <button onclick = "concatElements()"> Combine elements </button>
   <script>
      function concatElements() {
         let element1 = document.createElement('p');
         element1.innerHTML = "This is a first element!";
         let element2 = document.createElement('p');
         element2.innerHTML = "This is a second element!";
         let div_Element = document.getElementById('content');
         div_Element.after(element1, element2);
      }
   </script>
</body>
</html>

使用者學習了三種在 JavaScript 中組合多個 HTML 元素並將結果元素附加到任何 HTML 元素的方法。在第一種方法中，使用者可以使用 =運算子將多個元素儲存在單一變數中，然後，我們可以將結果元素的值指派給innerHTML屬性。

以上是如何使用 JavaScript 組合多個元素並將結果附加到 div 中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。