Kadangkala, kita perlu menggunakan JavaScript untuk memanipulasi elemen HTML. Oleh itu, kami boleh menggunakan JavaScript untuk menambah atau mengalih keluar elemen HTML. Tutorial ini akan mengajar kami untuk menggabungkan berbilang elemen HTML dalam pukulan menggunakan JavaScript.
Kadangkala kita perlu memaparkan beberapa elemen HTML kepada pengguna apabila mereka mengklik butang atau pencetus peristiwa tertentu. Oleh itu, kita boleh menggunakan kaedah di bawah untuk menggabungkan berbilang elemen dan menambahkan hasilnya pada elemen div menggunakan JavaScript.
innerHTML, seperti namanya, membolehkan kami menetapkan HTML mana-mana elemen tertentu menggunakan JavaScript. Menggunakan operator tugasan dengan atribut innerHTML akan menggantikan HTML elemen tertentu.
Apabila kita menggunakan operator += dengan atribut innerHTML, kita boleh menambahkan berbilang elemen pada elemen HTML tertentu.
Anda boleh menggabungkan berbilang elemen dan menambahkannya pada elemen div menggunakan atribut innerHTML seperti dalam sintaks berikut.
test_div.innerHTML += html;
Dalam sintaks di atas, test_div ialah elemen HTML yang diakses melalui JavaScript.
Dalam contoh di bawah, kami akan melakukan lima lelaran gelung for. Kami menggunakan atribut innerHTML untuk menambahkan beberapa HTML pada elemen div pada setiap lelaran gelung.
<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>
Kami boleh menambahkan HTML pada elemen tertentu menggunakan kaedah append() JQuery. Kita boleh menggunakan kaedah append() beberapa kali untuk menambahkan berbilang elemen pada elemen HTML tertentu.
Pengguna boleh mengikut sintaks di bawah untuk menambahkan berbilang elemen HTML pada elemen HTML tertentu menggunakan kaedah append() jQuery.
$('#content').append(html)
Dalam sintaks di atas, html ialah baris html, yang mengandungi berbilang atau elemen tunggal, untuk dilampirkan pada penghujung elemen HTML.
Dalam contoh di bawah, apabila pengguna mengklik butang, ia memanggil fungsi appendHTML(). Dalam fungsi appendHTML(), kami menambahkan berbilang elemen HTML pada elemen tertentu menggunakan gelung. Pengguna boleh melihat bahawa kami menggunakan kaedah JQuery append() untuk menambahkan elemen HTML baharu pada setiap lelaran gelung.
<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>
Dalam output di atas, pengguna boleh melihat bahawa apabila pengguna mengklik pada butang, ia menambahkan elemen HTML pada elemen div dengan id "kandungan".
JavaScript termasuk kaedah after() untuk menambah elemen HTML selepas elemen tertentu. Kita boleh menghantar baris HTML yang dipisahkan koma atau mencipta elemen selepas dalam JavaScript sebagai argumen kepada kaedah after().
Pengguna boleh mengikut sintaks di bawah untuk menambahkan berbilang elemen pada elemen HTML menggunakan kaedah after() JavaScript dan bukannya menggabungkannya menjadi satu elemen.
div_Element.after(elements);
elemen - Ia adalah elemen html yang dipisahkan koma berbilang ditambah selepas elemen HTML tertentu.
Dalam contoh di bawah, fungsi concatElements() dilaksanakan apabila pengguna mengklik butang. Dalam fungsi concatElements(), kami mencipta elemen HTML menggunakan kaedah createElement() dan menambah html padanya menggunakan atribut innerHTML.
Selepas itu, kami lulus elemen1 dan elemen2 sebagai parameter kaedah after() untuk menambahkannya selepas elemen 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>
Pengguna mempelajari tiga cara untuk menggabungkan berbilang elemen HTML dalam JavaScript dan menambahkan elemen yang terhasil pada mana-mana elemen HTML. Dalam kaedah pertama, pengguna boleh menyimpan berbilang elemen dalam satu pembolehubah menggunakan operator +=, dan kemudian, kita boleh menetapkan nilai elemen yang terhasil kepada atribut innerHTML.
Atas ialah kandungan terperinci Bagaimana untuk menggabungkan berbilang elemen menggunakan JavaScript dan menambahkan hasilnya ke div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk memasang wordpress selepas memuat turunnya
Apakah maksud aktiviti status pengaktifan win11?
Perisian penciptaan laman web
Apakah ungkapan biasa dalam php
Perbezaan antara penuding tatasusunan dan tatasusunan penuding
Apakah pelayan awan?
nilai mutlak python
Kaedah pelaksanaan fungsi halaman seterusnya VUE
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
