有時，我們需要使用 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 中？的詳細內容，更多請關注www.92cms.cn其它相關文章！
