資料結構
網路
關係資料庫管理系統
作業系統
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+ 次檢視
