cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mengembalikan HTML atau membina HTML menggunakan JavaScript?

Bagaimana untuk mengembalikan HTML atau membina HTML menggunakan JavaScript?

王林
王林ke hadapan
2023-09-10 21:25:061306semak imbas

如何使用 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;;
}

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)

Pembolehubah senarai kini mengandungi HTML berikut - 

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

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

Pembolehubah senarai kini mengandungi HTML berikut -

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

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>

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

Pembolehubah senarai kini mengandungi HTML berikut -

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

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>

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!

JavaScript html 字符串 dom innerHTML
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menunjukkan bar kemajuan dalam ReactNative?Artikel seterusnya：Bagaimana untuk menunjukkan bar kemajuan dalam ReactNative?

Artikel berkaitan

Lihat lagi