Bugün JQuery'de ekleme işlemlerini anlatacağım. Bir örnek ile açıklamak en güzeli olacak.
Haydi başlayalım.
Bir takipçi listemiz olsun buraya kişi ekleyelim.
Görüntü:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="tr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- Google JQuery kütüphanesi -->
<title>JQuery Ekleme İşlemi</title>
</head>
<body>
Ad Soyad: <input id="adSoyad" type="text" value=""/>
<button id="ekle" type="button">Ekle</button>
<div id="icerik">
<p>Mehmet Çetin</p>
</div>
<script>
$(document).ready(function() { //sayfa yüklendiğinde
$('#ekle').click(function() { //Ekle butonuna basıldığında
$('#icerik').append('<p>'+$('#adSoyad').val()+'</p>'); //icerik id li div e ismi alta ekle
});
});
</script>
</body>
</html>
Şimdi de ismi alta değil üste ekleyelim. Yukardaki <script> </script> etiketleri arasındaki kodu aşağıdaki ile değiştirin.
$(document).ready(function() { //sayfa yüklendiğinde
$('#ekle').click(function() { //Ekle butonuna basıldığında
$('#icerik').prepend('<p>'+$('#adSoyad').val()+'</p>'); //icerik id li div e ismi üste ekle
});
});
Görüntü:
Kendinize İyi bakın ;)
0 yorum :
Yorum Gönder