jQuery məlumat əlavə etmək

jQuery ilə HTML'a yeni element və məzmun əlavə etmək çox asandır.

Bunun üçün dörd üsulumuz var:

- append() - Məzmunu, seçilmiş elementin sonuna əlavə edir.
- prepend() - Məzmunu, seçilmiş elementin əvvəlinə əlavə edir.
- after() - Seçilən elementdən sonra məzmunu əlavə edir.
- before() - Seçilən elementdən əvvəl məzmunu əlavə edir.

İndi bunları bir-bir nəzərdən keçirək.

jQuery append() Üsulu
Bir elementin bitdiyi yerə məzmun, element əlavə edir.

Nümunəni araşdıraq:
<ol>
   <li>Məzmun 1</li>
   <li>Məzmun 1</li>
   <li>Məzmun 1</li>
</ol>
<button id="btn1">Yeni məzmun əlavə et</button>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("ol").append("<li>Yeni məzmun</li>");
  });
});
</script>
Nəticəni görmək üçün klikləyin
 
"Yeni məzmun əlavə et" düyməsinə kliklədikdə <ol></ol> elementləri arasına yeni li elementlərinin əlavə olunduğu görünür.

jQuery prepend() üsulu
Bir elementin başladığı yerə məzmun, element əlavə edir.

Yuxarıdakı nümunədə $("ol").append(... olan hissədə append əvəzinə prepend dəyişib yoxlayın. Bu dəfə məzmunun siyahının sonuna deyil, əvvəlinə əlavə olunduğunu görəcəksiniz.

Səhifənizə append() istifadə edərək yeni HTML elementləri əlavə edərkən üç yoldan istifadə edə bilərsiniz:

1-ci yol: HTML istifadə etmək
var txt1="<p>Text.</p>";
 
2-ci yol: jQuery ilə əlavə etmək
var txt2=$("<p></p>").text("Text.");
 
3-cü yol: HTML DOM istifadə etmək
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
 
Aşağıdakı nümunədə eyni anda üç üsuldan istifadə edərək üç ədəd element yaratdığımızı görəcəksiniz.
<div id="div1"></div>
<button onclick="appendText();">Elementləri əlavə et</button>
<script>
function appendText()
{
   var txt1="<p>Üsul 1</p>";

   var txt2=$("<p></p>").text("Üsul 2");

   var txt3=document.createElement("p");
   txt3.innerHTML="Üsul 3";

   $("#div1").append(txt1,txt2,txt3);
}
</script>
Nəticəni görmək üçün klikləyin
 
jQuery after() üsulu
Bir HTML elementindən əvvəl başqa bir element və ya məzmun əlavə etmək üçün bu koddan istifadə edə bilərik.

jQuery before() üsulu
Bir HTML elementindən sonra başqa bir element və ya məzmun əlavə etmək üçün bu koddan istifadə edə bilərik.

Aşağıdakı nümunə after() və before() üsulunu anlamağı asanlaşdıracaq.
<span id="esas">[BAŞLIQ]</span><br>
<button id="btn7">Əvvəlinə əlavə et</button>
<button id="btn8">Sonrasına əlavə et</button>
<script>
$(document).ready(function(){
  $("#btn7").click(function(){
    $("#esas").before("<b>«</b>");
  });

  $("#btn8").click(function(){
    $("#esas").after("<b>»</b>");
  });
});
</script>
Nəticəni görmək üçün klikləyin
 
Kod işə düşdükdə "btn1" id'i olan düyməyə klikləyəndə BAŞLIQ yazısının soluna, "btn2" id'i olan düyməyə klikləyəndə isə BAŞLIQ yazısının sağına («/») əlavə edilir.
jQuery