有时，我们需要使用 JavaScript 来操作 HTML 元素。因此，我们可以使用 JavaScript 来添加或删除 HTML 元素。本教程将教我们使用 JavaScript 在一个镜头中组合多个 HTML 元素。
有时我们需要在用户单击按钮或特定事件触发器时向他们显示一些 HTML 元素。因此，我们可以使用下面的方法来组合多个元素，并使用 JavaScript 将结果附加到 div 元素中。
使用innerHTML属性
innerHTML，顾名思义，允许我们使用 JavaScript 设置任何特定元素的 HTML。将赋值运算符与 innerHTML 属性一起使用会替换特定元素的 HTML。
当我们将 += 运算符与 innerHTML 属性一起使用时，我们可以将多个元素附加到特定的 HTML 元素。
立即学习“Java免费学习笔记（深入）”；
语法
您可以按照以下语法使用innerHTML属性组合多个元素并将它们附加到div元素。
- test_div.innerHTML += html;
登录后复制
在上述语法中，test_div 是通过 JavaScript 访问的 HTML 元素。
示例
在下面的示例中，我们将进行五次 for 循环迭代。我们使用innerHTML 属性在每次循环迭代中将一些HTML 附加到div 元素。
- button { font-size: 1.3rem; background-color: aqua; border-radius: 10px; color: blue; margin: 10px; }
Using the innerHTML property to append multiple HTML elements to the particular HTML element
This is the HTML div element.function appendEle() { let test_div = document.getElementById("test_div"); for (let i = 0; i < 5; i++) { test_div.innerHTML += "digit is " + i + " "; } }
登录后复制
使用JQuery的append()方法
我们可以使用 JQuery 的append()方法将HTML附加到特定元素。我们可以多次使用append()方法将多个元素附加到特定的HTML元素。
语法
用户可以按照下面的语法使用jQuery的append()方法将多个HTML元素附加到特定的HTML元素。
- $('#content').append(html)
登录后复制
在上面的语法中，html 是一行 html，包含多个或单个元素，要附加在 HTML 元素的末尾。
示例
在下面的示例中，当用户单击按钮时，它会调用appendHTML() 函数。在appendHTML() 函数中，我们使用循环将多个HTML 元素附加到特定元素。用户可以看到我们使用 JQuery append() 方法在每次循环迭代中附加新的 HTML 元素。
- div { font-size: 1.5rem; background-color: yellow; color: black; width: 250px; }
Using the JQuery append() method to append multiple HTML elements to the particular HTML element
testing content.
function appendHTML() { for (let i = 0; i < 10; i++) { $('#content').append('This div is appended! ') } }登录后复制
在上面的输出中，用户可以观察到，当用户单击按钮时，它会将 HTML 元素附加到 id 为“content”的 div 元素中。
使用 JavaScript 的 after() 方法
JavaScript 包含 after() 方法，用于在特定元素后添加 HTML 元素。我们可以通过逗号分隔的行 HTML 或在 JavaScript 中创建后的元素作为 after() 方法的参数传递。
语法
用户可以按照下面的语法使用 JavaScript 的 after() 方法将多个元素附加到 HTML 元素，而不是将它们组合成单个元素。
登录后复制
参数
elements – 它们是多个以逗号分隔的 html 元素，添加在特定 HTML 元素之后。
示例
在下面的示例中，concatElements() 函数在用户单击按钮时执行。在 concatElements() 函数中，我们使用 createElement() 方法创建 HTML 元素，并使用innerHTML 属性向其中添加 html。
之后，我们将 element1 和 element2 作为 after() 方法的参数传递，以将它们附加到 div 元素之后。
Using the after() method to append multiple HTML elements to the particular HTML element
testing content.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); }登录后复制
用户学习了三种在 JavaScript 中组合多个 HTML 元素并将结果元素附加到任何 HTML 元素的方法。在第一种方法中，用户可以使用+=运算符将多个元素存储在单个变量中，然后，我们可以将结果元素的值分配给innerHTML属性。
以上就是如何使用 JavaScript 组合多个元素并将结果附加到 div 中？的详细内容，更多请关注【创想鸟】其它相关文章！
