Bu yazımızda append, prepend, after ve before metodlarının ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz. Bu etiketler ile kolay bir şekilde yeni etiket veya içerikler ekleyebiliriz.
► append metodu ile seçtiğimiz Html etiketi bitmeden önceki son kısma ekleme yapabiliriz.
► prepend metodu ile seçtiğimiz Html etiketi başladıktan sonraki ilk kısma ekleme yapabiliriz.
► after metodu ile ile seçtiğimiz Html etiketi bittikten sonraki ilk kısma ekleme yapabiliriz.
► before metodu ile ile seçtiğimiz Html etiketi başlamadan önceki ilk kısma ekleme yapabiliriz.
Örneklerimizde bir p etiketi birde sıralı liste tanımlayalım ve metodlarımızı uygulayalım.
Göreceğiniz gibi metoda göre içeriklerin eklenme yerleri değişiklik gösteriyor.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<button id="append">append()</button> <button id="prepend">prepend()</button><br> <button id="after">after()</button> <button id="before">before()</button> <ol id="box"> <li>Javascript</li> <li>Jquery</li> </ol> <hr> <p id="p">Lorem ipsum dolor sit.</p> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
body { margin: 20px; font-size: 18px; } button { width: 200px; padding: 10px; margin-right: 8px; margin-bottom: 8px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } #box { border: 3px solid black; width: 175px; min-height: 50px; } .append{ font-size: 20px; color:blueviolet; } .prepend{ font-size: 20px; color:brown; } .after{ font-size: 20px; color:deeppink; } .before{ font-size: 20px; color:chartreuse; } |
Jquery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> $(document).ready(function() { $("#append").click(function() { $("#box").append("<li>Html5 (append)</li>"); $("#p").append("<b class='append'>Lorem ipsum (append)</b>"); }); $("#prepend").click(function() { $("#box").prepend("<li>Css (prepend)</li>"); $("#p").prepend("<b class='prepend'>Lorem ipsum (prepend)</b>"); }); $("#after").click(function() { $("#box").after("<li>Bootstrap (after)</li>"); $("#p").after("<b class='after'>Lorem ipsum (after)</b>"); }); $("#before").click(function() { $("#box").before("<li>Css3 (before)</li>"); $("#p").before("<b class='before'>Lorem ipsum (before)</b>"); }); }); |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
, prepend(), after(), before() Kullanımı){kind=link}