Bagaimana untuk mencipta elemen daripada rentetan dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk mencipta elemen daripada rentetan dalam JavaScript?

王林

Lepaskan： 2023-08-27 18:21:03

ke hadapan

1564 orang telah melayarinya

如何在 JavaScript 中从字符串创建元素？

Dalam tutorial ini, kita akan melihat pelbagai cara untuk mencipta elemen daripada rentetan dalam JavaScript. Mencipta elemen daripada rentetan boleh menjadi sangat berguna jika kita perlu menjana elemen secara dinamik untuk menjadikan tapak web interaktif. Contohnya seperti dalam apl senarai tugasan di mana kami menambah, memadam dan mengedit item tugasan.

Kaedah

createElement()

Kami mencipta item JavaScript menggunakan kaedah createElement(). Untuk mencipta elemen tertentu, kami menghantar nama item sebagai rentetan ke dalam kaedah createElement().

Fungsi

createElement(tagName) mempunyai satu parameter sebagai nama tag yang akan dibuat menggunakan kaedah ini. Di sini tagName ialah nama parameter dan ia akan berada dalam bentuk rentetan. Ambil perhatian bahawa hanya satu elemen dicipta daripada rentetan.

Tatabahasa

document.createElement("tagName")

Salin selepas log masuk

Dalam kedudukan tagName kita lulus nama tag seperti p (perenggan), h1 (tajuk 1), img (imej). createElement akan menjadikan tagName huruf kecil supaya anda tidak perlu risau tentang kes.

Langkah

Langkah 1 - Buat rentetan menggunakan nilai elemen seperti h3 dan p
Langkah 2 - Hantar rentetan sebagai parameter kepada kaedah createElement(). Berikan nilai kepada pembolehubah. Ini akan mewujudkan elemen yang kita perlukan.
Langkah 3 - Selepas mencipta elemen, kami menetapkan teks yang diperlukan kepada kedua-dua elemen menggunakan atribut innerText.
LANGKAH 4 - Lagipun, tambahkan kita menggunakan kaedah append() atau appendChild() untuk menambahkan elemen yang dicipta pada halaman web supaya ia kelihatan kepada pengguna web.

Mari kita buat tajuk dan perenggan daripada rentetan.

let string1="h3"
let string2="p"
let element1=document.createElement(string1)
let element2=document.createElement(string2)

Salin selepas log masuk

Jadi anda perlu memahami cara kami mencipta elemen, tetapi mencipta elemen tidak membantu dalam memaparkan elemen itu kepada pengguna kerana ia bukan sebahagian daripada DOM, sebaliknya kita perlu menjadikannya sebahagian daripada DOM dengan melampirkannya pada laman web

Jadi kami menggunakan beberapa kaedah seperti append() dan appendChild().

Contoh

Gunakan kaedah append() untuk menambahkan elemen yang dicipta.

Dalam contoh di bawah, kami telah mencipta dua elemen h3 dan p menggunakan kaedah createElement() dokumen. Kemudian tetapkan beberapa teks kepada elemen ini dan gunakan kaedah append() untuk menambahkan elemen pada DOM. Akhir sekali, paparkan elemen menggunakan atribut innerHTML.

<html>
<head>
   <title>Creating elements from string in JavaScriptnhi</title>
</head>
<body>
   <script>
      let string1="h3"
      let string2="p"
      let element1=document.createElement(string1)
      let element2=document.createElement(string2)
      element1.innerText="An h3 element using string"
      element2.innerText="A paragraph element using string"
      document.body.append(element1)
      document.body.append(element2)
   </script>
</body>
</html>

Salin selepas log masuk

Contoh

Tambahkan elemen yang dicipta menggunakan kaedah appendChild().

Dalam contoh di bawah, kami mencipta dua elemen h3 dan p menggunakan kaedah createElement() dokumen. Kemudian tetapkan beberapa teks kepada elemen ini dan gunakan kaedah appendChild() untuk menambahkan elemen pada DOM. Akhir sekali, gunakan atribut innerHTML untuk memaparkan elemen

<html>
<head>
   <title>Creating elements from string in JavaScript </title>
</head>
<body>
   <script>
      let string1="h3"
      let string2="p"
      let element1=document.createElement(string1)
      let element2=document.createElement(string2)
      element1.innerText="An h3 element using string"
      element2.innerText="A paragraph element using string"
      document.body.appendChild(element1)
      document.body.appendChild(element2)
   </script>
</body>
</html>

Salin selepas log masuk

Kini anda mungkin terfikir, output program di atas adalah sama, jadi apakah yang membezakan kedua-dua program tersebut?

Nah, ya, kedua-duanya digunakan untuk menambahkan nod pada dokumen HTML, tetapi sekiranya, kaedah append() mengembalikan nod yang ditambahkan, tetapi kaedah appendChildI() tidak mengembalikan apa-apa.

Menggunakan kaedah append() kita boleh menambah berbilang elemen pada satu masa, tetapi dalam kaedah appendChild() kita hanya boleh menambahkan satu elemen pada satu masa.

Suka

document.body.append(element1, element2)

Salin selepas log masuk

Ini akan melakukan kerja yang sama seperti

document.body.append(element1)
document.body.append(element2)

Salin selepas log masuk

Menggunakan kaedah append() kedua-dua DOMString dan DOMNodes boleh dilampirkan pada elemen induk, tetapi dalam kes ini hanya kaedah appendChild() DOMNodes boleh dilampirkan pada elemen induk.

Jadi, ini adalah beberapa cara kita boleh mencipta elemen daripada rentetan.

Atas ialah kandungan terperinci Bagaimana untuk mencipta elemen daripada rentetan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!