如何使用 JavaScript 组合多个元素并将结果附加到 div 中？
- PHPz转载
- 2023-09-08 14:37:091317浏览
有时，我们需要使用 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>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>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>
用户学习了三种在 JavaScript 中组合多个 HTML 元素并将结果元素附加到任何 HTML 元素的方法。在第一种方法中，用户可以使用+=运算符将多个元素存储在单个变量中，然后，我们可以将结果元素的值分配给innerHTML属性。
以上是如何使用 JavaScript 组合多个元素并将结果附加到 div 中？的详细内容。更多信息请关注PHP中文网其他相关文章！