html metodu
html metodu, bir elemanın metnini değiştirmeye
ve etiketlerle birlikte almayı sağlar.
Sözdizimi
Metni alma:
$(selektör).html();
Metni değiştirme:
$(selektör).html(yeni metin);
Ek Bilgiler
html metodu, belirtilen bir fonksiyonu
kümedeki her elemana uygulayabilir.
Bu durumda fonksiyon ilk parametre olarak
kümedeki eleman numarasını, ikinci parametre olarak
ise elemanın mevcut metnini alır:
$(selektör).html(function(kümedeki numara, elemanın mevcut metni));
Fonksiyondaki değişken isimleri herhangi bir şey olabilir.
Örneğin, ilk parametreye index adını verirsek -
o zaman fonksiyonumuzun içinde, fonksiyonun o anda işlem yaptığı
elemanın küme içindeki numarasının bulunduğu index
değişkeni erişilebilir olacaktır. Benzer şekilde, ikinci
parametreye örneğin value adını verirsek - o zaman
fonksiyonumuzun içinde, fonksiyonun o anda işlem yaptığı
elemanın metninin bulunduğu value değişkeni
erişilebilir olacaktır:
$(selektör).html(function(index, value) {
// burada index ve value değişkenlerine erişilebilir
});
Her elemanın metni, fonksiyonun o eleman için özel olarak döndürdüğü metinle değişecektir.
Örnek
Paragrafımızın içeriğini ekrana yazdıralım:
<p id="test">metin</p>
let text = $('#test').html();
alert(text);
Örnek
Paragrafımızın içeriğini değiştirelim:
<p id="test">metin1</p>
$('#test').html('metin2');
HTML kodu şu şekilde görünecektir:
<p id="test">metin2</p>
Örnek
Paragrafımızın içeriğini etiketlerle birlikte değiştirelim:
<p id="test">metin1</p>
$('#test').html('<span>metin2</span>');
HTML kodu şu şekilde görünecektir:
<p id="test"><span>metin2</span></p>
Örnek
Her paragrafa küme içindeki sıra numarasını sonuna ekleyelim:
<p>metin</p>
<p>metin</p>
<p>metin</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
HTML kodu şu şekilde görünecektir:
<p>metin 0</p>
<p>metin 1</p>
<p>metin 2</p>
