Dodavanje novog HTML sadržaja

 

Pogledat ćemo četiri jQuery metode koji se koriste za dodavanje novog sadržaja:

 

• append() - Umetanje sadržaja na kraju odabranih elemenata
• prepend() - Umetanje sadržaja na početku odabranih elemenata
• after() - Umetanje sadržaja nakon odabranih elemenata
• before() - Umetanje sadržaja prije odabranih elemenata

 

 

append()

 

$("p").append("Some appended text.");

 

prepend()

 

$("p").prepend("Some prepended text.");

 

 

Dodavanje nekoliko novih elemenata sa append() i prepend()

 

U oba gornja primjera umetnuli smo samo neki tekst/HTML na početku/kraju odabranih HTML elemenata.

Međutim, i append() i prepend() metode mogu uzimati neograničen broj novih elemenata kao parametara. Novi elementi mogu se generirati s text/HTML(kao što smo učinili u gore navedenim primjerima), s jQueryjem.

 

U sljedećem primjeru stvaramo nekoliko novih elemenata. Elementi su stvoreni s text/HTML, jQuery-om i JavaScript-om/DOM-om. 
Zatim nove elemente dodajemo u tekst metodom append() (ovo bi funkcioniralo i za prepend ()):

 

function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML 
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}

 

 

after() i before() metoda

 

after() unosi sadržaj NAKON odabranih HTML elemenata
before() unosi sadržaj PRIJE odabranih HTML elemenata.

 

$("img").after("Some text after");
$("img").before("Some text before");

 

 

Dodavanje nekoliko novih elemenata sa after() i before()

 

Također, i metode after() i before() mogu uzimati neograničen broj novih elemenata kao parametara.

Novi elementi se mogu generirati s text/HTML (kao što smo učinili u gornjem primjeru), s jQueryjem ili s JavaScript kodom i DOM elementima.

 

function afterText() {
  var txt1 = "<b>I </b>";                    // Create element with HTML 
  var txt2 = $("<i></i>").text("love ");     // Create with jQuery
  var txt3 = document.createElement("b");    // Create with DOM
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}

Uklanjanje elemenata/sadržaja

 

Za uklanjanje elemenata i sadržaja postoje uglavnom dvije jQuery metode:

 

• remove () - uklanja odabrani element (i njegove podređene elemente)
• empty() - uklanja podređene elemente iz odabranog elementa

 

 

remove()

 

$("#div1").remove();

 

 

empty()

 

$("#div1").empty();

 

Filtriranje elemenata koje želimo maknuti

 

remove() također prihvaća jedan parametar koji vam omogućuje filtriranje elemenata koji želite ukloniti.

 

Sljedeći primjer uklanja sve <p> elemente s class = "test":

$("p").remove(".test");

 

Ovaj primjer uklanja sve <p> elemente s class = "test" i class = "demo":

$("p").remove(".test, .demo");