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-loop的五次迭代。我们在每次循环迭代中使用innerHTML属性向div元素添加一些HTML。

<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()方法

我们可以使用append()方法，用JQuery将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>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>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>