Bagaimana untuk mengembalikan HTML atau membina HTML menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk mengembalikan HTML atau membina HTML menggunakan JavaScript?

王林

Lepaskan： 2023-09-10 21:25:06

ke hadapan

1206 orang telah melayarinya

如何使用 JavaScript 返回 HTML 或构建 HTML？

Apabila membina aplikasi web, anda selalunya perlu menjana HTML secara dinamik pada bahagian pelanggan. Ini boleh dilakukan menggunakan JavaScript, dan terdapat pelbagai cara untuk melakukannya. Dalam artikel ini, kami akan menunjukkan kepada anda cara untuk mengembalikan HTML atau membina HTML menggunakan JavaScript.

Mengembalikan HTML daripada fungsi

Salah satu cara untuk menjana HTML secara dinamik ialah mengembalikan rentetan HTML daripada fungsi. Sebagai contoh, katakan kita mempunyai fungsi yang menjana item senarai -

function generateListItem(text) {
   return &#39;<li>&#39; + text + &#39;</li>&#39;;
}

Salin selepas log masuk

Kemudian kita boleh menggunakan fungsi ini untuk menjana HTML -

function generateListItem(text) {
   return &#39;<li>&#39; + text + &#39;</li>&#39;;
}

var list = '';
list += generateListItem('Item 1');
list += generateListItem('Item 2');
list += generateListItem('Item 3');
list += '';

console.log(list)

Salin selepas log masuk

Pembolehubah senarai kini mengandungi HTML berikut -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Salin selepas log masuk

Bina HTML menggunakan kaedah DOM

Secara dinamik jana HTML Cara lain ialah menggunakan kaedah DOM untuk membina struktur HTML. Ini boleh dilakukan dengan mencipta elemen dan kemudian menambahkannya pada DOM. Sebagai contoh, katakan kita ingin mencipta senarai yang mengandungi item yang sama seperti sebelumnya -

var list = document.createElement(&#39;ul&#39;);

var item1 = document.createElement(&#39;li&#39;);
item1.innerText = &#39;Item 1&#39;;
list.appendChild(item1);

var item2 = document.createElement(&#39;li&#39;);
item2.innerText = &#39;Item 2&#39;;
list.appendChild(item2);

var item3 = document.createElement(&#39;li&#39;);
item3.innerText = &#39;Item 3&#39;;
list.appendChild(item3);

Salin selepas log masuk

Pembolehubah senarai kini mengandungi HTML berikut -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami membina senarai HTML menggunakan DOM yang berbeza kaedah.

<!DOCTYPE html>
<html>
<body>
   <h2> Building HML using DOM methods</h2>
   <div id="parent">
      <p> We create a list by generating HTML elements</p>
      <h4 id="child">Tutorials List</h4>
   </div>
   <div id="result"></div>

   <script>
      var list = document.createElement(&#39;ul&#39;);
      var item1 = document.createElement(&#39;li&#39;);
      item1.innerText = &#39;JavaScript&#39;;
      list.appendChild(item1);

      var item2 = document.createElement(&#39;li&#39;);
      item2.innerText = &#39;Python&#39;;
      list.appendChild(item2);

      var item3 = document.createElement(&#39;li&#39;);
      item3.innerText = &#39;Rupy&#39;;
      list.appendChild(item3);
      document.getElementById("result").appendChild(list)
   </script>
</body>
</html>

Salin selepas log masuk

Dalam atur cara di atas, kami menggunakan kaedah createElement untuk mencipta senarai dan item senarai yang tidak tersusun. Kaedah appendChild digunakan untuk menambah item senarai pada senarai.

Membina HTML menggunakan innerHTML

Cara lain untuk membina HTML ialah menggunakan atribut innerHTML. Ini boleh dilakukan dengan mencipta elemen dan kemudian menetapkan sifat innerHTMLnya kepada rentetan HTML. Sebagai contoh, katakan kita ingin mencipta senarai yang mengandungi item yang sama seperti sebelumnya -

var list = document.createElement(&#39;ul&#39;);
list.innerHTML = &#39;<li>Item 1</li><li>Item 2</li><li>Item 3</li>&#39;;

Salin selepas log masuk

Pembolehubah senarai kini mengandungi HTML berikut -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami membina senarai HTML dengan memberikan senarai ke innerHTML .

<!DOCTYPE html>
<html>
<body>
   <div id="result"> List </div>
   <script>
      var list = document.createElement(&#39;ul&#39;);
      list.innerHTML = &#39;<li>Item 1</li><li>Item 2</li><li>Item 3</li>&#39;;
      document.getElementById("result").appendChild(list)
   </script>
</body>
</html>

Salin selepas log masuk

Dalam program di atas, kami membuat senarai menggunakan kaedah createElement. Gunakan innerHTML untuk menambahkan item senarai pada senarai. Untuk memaparkan senarai, kami menambahkan elemen dengan id = "hasil" menggunakan kaedah appendChild.

Kesimpulan

Dalam tutorial ini kami menunjukkan cara untuk mengembalikan HTML atau membina HTML menggunakan JavaScript. Terdapat pelbagai cara untuk melakukan ini, dan kaedah yang anda pilih bergantung pada keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk mengembalikan HTML atau membina HTML menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!