jQuery - Inserare/Ștergere de conținut

Inserare de conținut HTML - append(), prepend(), after() și before()

Cu jQuery, este ușor să adăugăm noi elemente / conținut HTML.

Cele patru metode jQuery care sunt utilizate pentru a adăuga conținut nou sunt:

Exemple de inserare de conținut:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append("Un text la sfârșitul elementului selectat.");
  });
  $("#btn2").click(function(){
    $("p").prepend("Un text la începutul elementului selectat.");
  });
  $("#btn3").click(function(){
    $("p").after("Un text înainte de elementul selectat.");
    $("p").before("Un text după elementul selectat.");
  });
});
</script>
</head>
<body>
  <p id="test" value="Mickey Mouse">This is some <b>bold</b> text in a paragraph.</p>
  <button id="btn1">Adaugă text la finalul elementului</button>
  <button id="btn2">Adaugă text la începutul elementului</button>
  <button id="btn3">Adaugă text după și îaninte de element</button>
</body>
</html>

Toate cele patru metode prezentate mai sus pot primii un număr infinit de parametrii, astfel putem creea mai multe elemente printr-o singură comandă.

function appendText() {
    var txt1 = "<p>Text.</p>";               // Generează un element HTML  
    var txt2 = $("<p></p>").text("Text.");   // Generearea unui element HTML cu jQuery
    var txt3 = document.createElement("p");  // Generearea unui element HTML folosind DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Adăugarea noilor elemente
}

Ștergerea de conținut HTML - remove() și empty()

Cu jQuery, este ușor să ștergem elemente / conținut HTML care există deja în pagină.

$("#btn1").click(function(){
    $("#div1").remove();
});
$("#btn2").click(function(){
    $("#div1").empty();
});
$("#btn3").click(function(){
    $("p").remove(".test, .demo");
});

Încărcarea de conținut HTML - load()

Cu ajutorul metodei load() se poate prelua conținut dintr-un fișier extern.

Sintaxa:

$(selector).load(URL,data,callback);

Exemplu:

$("button").click(function(){
    $("#div1").load("http://radu.ulbsibiu.ro/demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("Continutul extern s-a incarcat cu succes!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

Să se modifice exemplul de mai sus prin adăugarea a două noi butoane care să implementeze funcționalitate de ștergere a celor 2 funcții: remove() și empty().