Post and in-post ads
» » JavaScript HTML Obyektinin yaradılması

JavaScript HTML Obyektinin yaradılması

1-10-2022, 14:24
74
0
HTML elementlərini özümüz HTML ilə yaza və ya jаvascript ilə yarada və səhifəyə əlavə edə bilərik.
HTML obyekti yaratmaq üçün sənəd obyektinin createElement metodundan istifadə olunur.


Göstərilən element jаvascript obyektidir.


Elementin xassələrini (dəyər, id və s.) əlavə etmək üçün xassə və onun almalı olduğu dəyər jаvascript Objects yazısında olduğu kimi yazılır.


Düymə yaradıldıqdan və xüsusiyyət dəyərləri təyin edildikdən sonra appendChild,insertBefore kimi üsullardan istifadə edərək səhifəyə əlavə olunur.

<script>
"use strict";
  var buton = document.createElement("button");
  buton.innerHTML = "Ok et";

  document.body.appendChild(buton);
</script>
jаvascript ilə yaratdığımız HTML obyektlərinə müxtəlif hadisələr təyin edə bilərik.
<script>
"use strict";
  var buton = document.createElement("button");
  buton.innerHTML = "ok la";
  buton.onclick = function(){
    alert("Merhaba")
  }

  document.body.appendChild(buton);
</script>
jаvascript ilə div yaratmaq düymə yaratmağa bənzəyir.
<script>
"use strict";
  var bolum = document.createElement("div");
  bolum.innerHTML = "Salam jаvascript";
  
  document.body.appendChild(bolum);
</script>
Burada məzmun dəyərini təyin etmək üçün innerHTML-dən istifadə etdik, createTextNode metodundan da istifadə edə bilərik.
<script>
"use strict";
  var bolum = document.createElement("div");
  var icerik = document.createTextNode("Salam jаvascript")
  bolum.appendChild(icerik);

  document.body.appendChild(bolum);
</script>
Birinci üsul daha yaxşı görünür, çünki daha çox kod daha çox qarışıqlıqdır.


jаvascript ilə cədvəl yaratmaq düymələr və divlər yaratmağa bənzəyir, lakin sütunlar və sətirlər yaratmaq bir az daha mürəkkəbdir.
<script>
"use strict";
  var tablo = document.createElement("table");
  tablo.border = "1";

  var satir = document.createElement("tr");
  var sutun = document.createElement("td");
  sutun.innerHTML = "Matireal";

  satir.appendChild(sutun);
  tablo.appendChild(satir);

  document.body.appendChild(tablo);
</script>
Məsələn, əvvəlcə cədvəl yaradılır, sonra sətir və sütun yaradılır. Məzmun sütuna əlavə edilir və sonra sütun sətirə əlavə olunur. Sətir cədvələ əlavə edildi.


Bu qədər kod sadəcə sətir və sütun yaratmaq üçün yazılmışdır. 🙂


Döngələrlə daha az kod yazmaqla bunu edə bilərik.

jаvascript vurma cədvəli

<script>
  var tablo = document.createElement("table");
  tablo.border = "1";
  tablo.cellPadding = "5"

  for (var i = 1; i < 10; i++) {
    var satir = document.createElement("tr");
    
    for (var j = 1; j < 10; j++) {
      var sutun = document.createElement("td");
      sutun.innerHTML = i + "*" + j + " = " + i * j;
      satir.appendChild(sutun);
    }
    
    tablo.appendChild(satir);
  }

  document.body.appendChild(tablo);
</script>
Nümunədə çarpma cədvəli jаvascript istifadə edərək hazırlanır.


Sizə xoş gün arzulayıram.
SİZİ CƏLB EDƏ BİLƏR
Ayliq Bürclər Oktyabr 2018
Ayliq Bürclər Oktyabr 2018
Ayliq 10.2018 üçün ayliq burcler, Oktyabr ayi 2018 ci il ucun ayliq burcler, ay ərzinde burcler neler vəd edir? ay ərzində siz nələr gözləyir?
Anlamli Sözlər
Anlamli Sözlər
Qısa Anlamlı Sözler Yeni - Köhnə zamanlarda yada indiki vaxtda kimin ağlına gəlməyən elə sözlər söyləyənlər yazanlar var ki yoldaşlar çaşıb
© Sayt.biz 2014 - 2022 - bütün hüquqlar qorunur...