数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 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 循环的五次迭代。我们使用 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() 方法
我们可以使用 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>
用户学习了三种在 JavaScript 中组合多个 HTML 元素并将结果元素追加到任何 HTML 元素的方法。在第一种方法中，用户可以使用 += 运算符将多个元素存储在一个变量中，然后我们可以将结果元素的值赋值给 innerHTML 属性。
7K+ 次查看
