Bagaimana untuk menggabungkan berbilang elemen menggunakan JavaScript dan menambahkan hasilnya ke div?-tutorial js-php.cn

Bagaimana untuk menggabungkan berbilang elemen menggunakan JavaScript dan menambahkan hasilnya ke div?

PHPz

Lepaskan： 2023-09-08 14:37:09

ke hadapan

1355 orang telah melayarinya

如何使用 JavaScript 组合多个元素并将结果附加到 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;

Salin selepas log masuk

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>

Salin selepas log masuk

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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);

Salin selepas log masuk

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>

Salin selepas log masuk

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!