hujung hadapan web
tutorial js
Bagaimana untuk menggabungkan berbilang elemen menggunakan JavaScript dan menambahkan hasilnya ke div?
Bagaimana untuk menggabungkan berbilang elemen menggunakan JavaScript dan menambahkan hasilnya ke div?
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.
Gunakan atribut innerHTML
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.
Tatabahasa
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.
Contoh
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>
Gunakan kaedah append() JQuery
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.
Tatabahasa
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.
Contoh
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".
Gunakan kaedah after() JavaScript
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().
Tatabahasa
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);
Parameter
elemen - Ia adalah elemen html yang dipisahkan koma berbilang ditambah selepas elemen HTML tertentu.
Contoh
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Ganti aksara rentetan dalam javascript
Mar 11, 2025 am 12:07 AM
Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi
Bina Aplikasi Web Ajax anda sendiri
Mar 09, 2025 am 12:11 AM
Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J
10 JQuery Fun and Games Plugin
Mar 08, 2025 am 12:42 AM
10 Plugin Permainan JQuery yang menyeronokkan untuk menjadikan laman web anda lebih menarik dan meningkatkan keletihan pengguna! Walaupun Flash masih merupakan perisian terbaik untuk membangunkan permainan web kasual, jQuery juga boleh menghasilkan kesan yang mengejutkan, dan walaupun tidak setanding dengan permainan flash aksi tulen, dalam beberapa kes, anda juga boleh bersenang -senang di penyemak imbas anda. permainan jquery tic toe "Hello World" pengaturcaraan permainan kini mempunyai versi jQuery. Kod sumber JQuery Game Composition Crazy Word Ini adalah permainan mengisi kosong, dan ia dapat menghasilkan beberapa hasil yang pelik kerana tidak mengetahui konteks perkataan. Kod sumber JQuery Mine Sweeping Game
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
JQuery Parallax Tutorial - Latar Belakang Header Animasi
Mar 08, 2025 am 12:39 AM
Tutorial ini menunjukkan cara membuat kesan latar belakang paralaks yang menawan menggunakan jQuery. Kami akan membina sepanduk header dengan imej berlapis yang mewujudkan kedalaman visual yang menakjubkan. Plugin yang dikemas kini berfungsi dengan JQuery 1.6.4 dan kemudian. Muat turun
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Bermula dengan Matter.js: Pengenalan
Mar 08, 2025 am 12:53 AM
Matter.js adalah enjin fizik badan tegar 2D yang ditulis dalam JavaScript. Perpustakaan ini dapat membantu anda dengan mudah mensimulasikan fizik 2D dalam penyemak imbas anda. Ia menyediakan banyak ciri, seperti keupayaan untuk mencipta badan yang tegar dan menetapkan sifat fizikal seperti jisim, kawasan, atau ketumpatan. Anda juga boleh mensimulasikan pelbagai jenis perlanggaran dan daya, seperti geseran graviti. Matter.js menyokong semua pelayar arus perdana. Di samping itu, ia sesuai untuk peranti mudah alih kerana ia mengesan sentuhan dan responsif. Semua ciri-ciri ini menjadikannya bernilai masa untuk belajar menggunakan enjin, kerana ini memudahkan untuk membuat permainan atau simulasi 2D berasaskan fizik. Dalam tutorial ini, saya akan merangkumi asas -asas perpustakaan ini, termasuk pemasangan dan penggunaannya, dan menyediakan
Kandungan Div Refresh Auto Menggunakan JQuery dan Ajax
Mar 08, 2025 am 12:58 AM
Artikel ini menunjukkan bagaimana untuk menyegarkan semula kandungan div secara automatik setiap 5 saat menggunakan jQuery dan Ajax. Contohnya mengambil dan memaparkan catatan blog terkini dari suapan RSS, bersama -sama dengan timestamp refresh terakhir. Imej pemuatan adalah opsyena
