JavaScript 如何组合多个元素并将结果追加到一个div中

2023-01-20 01:16| 来源: 网络整理| 查看: 265

有时，我们需要用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。

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. Append elements function appendEle() { let test_div = document.getElementById("test_div"); for (let i = 0; i < 5; i++) { test_div.innerHTML += "

digit is " + i + "

"; } } 使用JQuery append()方法

我们可以使用append()方法，用JQuery将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. Append elements 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元素中，而不将它们合并成一个元素。

div_Element.after(elements); 参数 elements- 它们是多个以逗号分隔的html元素，可以添加在一个特定的HTML元素之后。示例

在下面的例子中，当用户点击按钮时，concatElements()函数就会执行。在concatElements()函数中，我们使用了createElement()方法来创建一个HTML元素，并使用innerHTML属性来添加html。

之后，我们将element1和element2作为after()方法的参数，将它们附加在一个div元素之后。

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;; } Using the after() method to append multiple HTML elements to the particular HTML element testing content. Combine elements 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属性。

【本文地址】

公司简介

联系我们