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

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

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

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

使用innerHTML屬性

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

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

文法

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

1	`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>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元素。

1	`$('#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>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 元素，而不是將它們組合成單一元素。

1	`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>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>