Dua cara untuk mencipta elemen secara dinamik dalam kemahiran JS_javascript

WBOY
Lepaskan: 2016-05-16 15:04:35
asal
1082 orang telah melayarinya

Artikel ini berkongsi dua kaedah mencipta elemen dalam js untuk rujukan anda. Kandungan khusus adalah seperti berikut

1) Sambungkan elemen yang perlu dibuat dalam bentuk rentetan; cari elemen induk dan tetapkan nilai kepada innerHTML elemen induk.

2) Gunakan beberapa fungsi yang disertakan dengan objek Dokumen dan Elemen untuk mencipta elemen secara dinamik (buat elemen => cari elemen induk => masukkan elemen pada kedudukan yang ditentukan)

1. Borang penyatuan rentetan

Untuk pemahaman yang lebih baik, tetapkan senario aplikasi.

Hasilkan set nombor secara rawak, jadikan set data ini ke dalam carta bar dan letakkannya dalam div[id="container"], seperti ditunjukkan di bawah

 

 <div id="container">
 </div>
 <script>
  window.onload = function () {
   var str='';
   for(var i=0; i<30 ;i++){
    var r = parseInt(Math.random()*100); //随机生成一个数字
    str += '<div>'+r+'</div>'; //拼接str
   }
   document.getElementById('container').innerHTML=str;
  }
 </script>
Salin selepas log masuk

2. Gunakan beberapa fungsi yang disertakan dengan objek Dokumen dan Elemen

Juga tetapkan senario aplikasi, seperti yang ditunjukkan di bawah

Dapatkan maklumat dalam input dan masukkannya ke sebelah kiri atau kanan segi empat merah di bawah mengikut butang di sebelah kanan.

 

Penyelesaian terbahagi kepada tiga langkah:

1. Cipta elemen: Document.createElement()
2. Cari elemen induk: Anda boleh menggunakan Id, nama, nama teg, kelas dan padankan pemilih css yang ditentukan
3. Masukkan elemen pada kedudukan yang ditentukan: element.appendChild(), element.insertBefore()                                                             

Kod pelaksanaan: 

<div id="div-input">
 <input type="text" id="txt_input" value="4"/>
 <input type="button" id="leftInsert" value="左侧入" />
 <input type="button" id="rightInsert" value="右侧入" />
</div>
<div id="container">
 <span>1</span>
 <span>2</span>
 <span>3</span>
</div>
 <script>
  window.onload = function () {
   var inputValue= document.getElementById('txt_input').value;
   document.getElementById('leftInsert').onclick=function(){
    //左侧入
    var span = document.createElement('span'); //1、创建元素
    span.innerHTML=inputValue;
    var container = document.getElementById('container'); //2、找到父级元素
    container.insertBefore(span,container.childNodes[0]);//插入到最左边
   }
   document.getElementById('rightInsert').onclick=function(){
    //右侧入
    var span = document.createElement('span'); //1、创建元素
    span.innerHTML=inputValue;
    var container = document.getElementById('container'); //2、找到父级元素
    container.appendChild(span); //3、在末尾中添加元素
   }
  }
 </script>

Salin selepas log masuk
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan