Secara dinamis membuat tag rentang dalam javascript

Diberikan dokumen HTML dan tugasnya adalah mengubah teks elemen span. Ada dua properti yang digunakan untuk mengubah konten

Table of Contents Show

Akses Objek Rentang
Buat Objek Rentang
Properti dan Acara Standar
Halaman Terkait
Tambahkan solusi Anda di sini
Pratinjau 0
Anggota yang Ada
atau Bergabunglah dengan kami
Saya, Javascript membuat elemen div secara dinamis
II, Cara membuat ul dan li secara dinamis di javascript
III, Cara membuat tag gambar dengan javascript dinamis
IV, Cara membuat javascript elemen rentang
Bagaimana cara menambahkan span secara dinamis dalam JavaScript?
Bagaimana cara membuat elemen rentang dalam JavaScript?
Bagaimana cara menambahkan span di div menggunakan JavaScript?
Bagaimana cara menambahkan tag span menggunakan jQuery?

Properti textContent DOM HTML. Properti ini mengatur/mengembalikan konten teks dari node yang ditentukan, dan semua keturunannya. Dengan mengatur properti textContent, simpul anak dihapus dan diganti dengan simpul teks tunggal yang memiliki string yang ditentukan.

Sintaksis

Mengembalikan konten teks dari sebuah node

node.textContent

Atur konten teks dari sebuah node

node.textContent = text

Properti innerText DOM HTML. Properti ini mengatur/mengembalikan konten teks dari node yang ditentukan, dan semua keturunannya. Dengan menyetel properti innerText, setiap simpul anak dihapus dan diganti dengan simpul teks tunggal yang memiliki string yang ditentukan.

Pendekatan. Pertama-tama kita akan memilih divisi di mana kita akan menemukan elemen . Ini dapat dilakukan dengan memilih elemen berdasarkan ID-nya menggunakan metode getElementById(). Kami selanjutnya akan mendapatkan semua elemen dari tipe yang ditentukan yang terkandung dalam divisi ini. Ini dapat dilakukan dengan menggunakan metode getElementsByTagName() pada pembagian yang telah kita temukan pada langkah sebelumnya. Kita kemudian bisa mendapatkan konten teks di dalamnya dengan mengulang semua elemen span dan menampilkannya sebagai daftar.

Objek Span mewakili elemen HTML .

Akses Objek Rentang

Anda dapat mengakses elemen dengan menggunakan getElementById().

Buat Objek Rentang

Anda dapat membuat elemen dengan menggunakan dokumen. metode createElement().

Properti dan Acara Standar

Objek Span mendukung properti dan acara standar

Halaman Terkait

tutorial HTML. Blok HTML

referensi HTML. HTML tag

klik tautan Create Span dan span akan dihasilkan secara dinamis, Jika Anda ingin lebih banyak manipulasi atau melakukan yang lain, beri tahu saya, saya akan menghubungi Anda kembali. . )

Tambahkan solusi Anda di sini

B I U S small BIG code var < > & link [^] encode untab case indent outdent

Pratinjau 0

Anggota yang Ada

atau Bergabunglah dengan kami

Unduh, Pilih, Komentari, Publikasikan

Email mu

Email ini sedang digunakan. Apakah Anda memerlukan kata sandi Anda?

Kata Sandi Opsional

Mohon saat menjawab pertanyaan

Baca pertanyaan dengan hati-hati
Pahami bahwa bahasa Inggris bukanlah bahasa utama semua orang, jadi toleran terhadap ejaan dan tata bahasa yang buruk
Jika pertanyaan diutarakan dengan buruk, mintalah klarifikasi, abaikan, atau edit pertanyaan dan perbaiki masalahnya. Penghinaan tidak diterima
Jangan beritahu seseorang untuk membaca manual. Kemungkinan mereka memiliki dan tidak mendapatkannya. Berikan jawaban atau lanjutkan ke pertanyaan berikutnya

Mari bekerja untuk membantu pengembang, bukan membuat mereka merasa bodoh

Konten ini, bersama dengan kode sumber dan file terkait, dilisensikan di bawah The Code Project Open License (CPOL)

Menetapkan string tag html ke variabel javascript, selain menggunakan tanda kutip ganda yang diloloskan untuk nilai atribut, terkadang string sangat panjang dan sepertinya agak rumit. Jika Anda menggunakan javascript untuk menambahkan elemen secara dinamis, tidak akan ada string yang rumit, kode lebih mudah dibaca dan mudah dipahami

Halaman web terdiri dari tag html (elemen) satu per satu, dan Anda juga dapat menambahkan tag secara dinamis seperti div, li, dan img satu per satu dalam javascript. Faktanya, apa pun tag htmlnya, metode pembuatan elemen javascript serupa, lalu kita mulai dengan menambahkan tag div secara dinamis

Saya, Javascript membuat elemen div secara dinamis

fungsi createElementDiv(obj) {
   var induk = dokumen. getElementById(obj);

      // Tambahkan div
      var div_obj = dokumen. createElement( "div" );

      // Tetapkan atribut untuk div, seperti id
    div_obj. setAttribute( "id" , "new_div" );

   div_obj. innerHTML = "Contoh Salah satu elemen pembuatan javascript. Tambahkan elemen div                   secara dinamis dalam javascript" ;
   orang tua. appendChild(div_obj);
}

Panggil. createElementDiv( "induk" );

Petunjuk. Kode JavaScript harus diletakkan di belakang elemen div, jika tidak maka akan menyebabkan kesalahan eksekusi kode karena tidak dapat diperoleh;

II, Cara membuat ul dan li secara dinamis di javascript

fungsi createElementLi(obj) {
    var ul_obj = dokumen. getElementById(obj);

   //Buat li
   var li_obj = dokumen. createElement( "li" );

      //Setel atribut untuk li, seperti id
       li_obj. setAttribute( "id" , "new_li" );

       li_obj. innerHTML = "Contoh Dua elemen pembuatan javascript. Tambahkan elemen li secara dinamis dalam javascript" ;
      ul_obj. appendChild(li_obj);
}

Panggil. createElementLi( "parent_ul" );

Jika Anda ingin membuat elemen ul, Anda dapat menulis kode seperti ini. var ul_Object = dokumen. createElement( "ul" );

III, Cara membuat tag gambar dengan javascript dinamis

fungsi createElementImg(obj) {
   var ul_obj = dokumen. getElementById(obj);

      // Tambahkan li
   var li_obj = dokumen. createElement( "li" );

   // Tambahkan img
    var img_obj = dokumen. createElement( "img" );

      // Tetapkan atribut untuk img, seperti id
   img_obj. setAttribute( "is" , "newIng" );

      // Tetapkan alamat untuk img
   img_obj. src = "/images/product. jpg" ;

   li_obj. appendChild(img_obj);
   ul_obj. appendChild(li_obj);
}

Panggil. createElementImg( "parent_ul" );

IV, Cara membuat javascript elemen rentang

<skrip ketik="text/javascript" language ="javascript" >
      function createElementSpan(obj) {
            var div_obj = dokumen. getElementById(obj);

            // Tambahkan rentang
            var span_obj = dokumen. createElement( "span" );

            // Tetapkan atribut untuk elemen rentang, seperti id
            span_obj. setAttribute( "id" , "span_New" );

            // Menyetel teks untuk elemen span
            span_obj. innerHTML = "Contoh tiga elemen pembuatan javascript. Tambahkan elemen Rentang Baru" ;

            div_obj. appendChild(span_obj);
   }
skrip >script>