jQuery - Přidat prvky
S jQuery je snadné přidávat nové prvky/obsah.
Přidat nový obsah HTML
Podíváme se na čtyři metody jQuery, které se používají k přidávání nového obsahu:
append()- Vloží obsah na konec vybraných prvkůprepend()- Vloží obsah na začátek vybraných prvkůafter()- Vloží obsah za vybrané prvkybefore()- Vloží obsah před vybrané prvky
Metoda jQuery append().
Metoda jQuery append()vkládá obsah NA KONEC vybraných prvků HTML.
Příklad
$("p").append("Some appended text.");
Metoda jQuery prepend().
Metoda jQuery prepend()vloží obsah NA ZAČÁTEK vybraných prvků HTML.
Příklad
$("p").prepend("Some prepended text.");
Přidejte několik nových prvků pomocí append() a prepend()
V obou výše uvedených příkladech jsme pouze vložili nějaký text/HTML na začátek/konec vybraných prvků HTML.
append()Metody a však prepend()mohou mít jako parametry nekonečné množství nových prvků. Nové prvky lze generovat pomocí textu/HTML (jako jsme to udělali v příkladech výše), pomocí jQuery nebo pomocí kódu JavaScript a prvků DOM.
V následujícím příkladu vytvoříme několik nových prvků. Prvky jsou vytvořeny pomocí text/HTML, jQuery a JavaScript/DOM. Poté k textu připojíme nové prvky append()metodou (taky by to fungovalo
prepend()):
Příklad
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
}
Metody jQuery after() a before().
Metoda jQuery after()vkládá obsah ZA vybranými HTML elementy.
Metoda jQuery before()vkládá obsah PŘED vybrané prvky HTML.
Příklad
$("img").after("Some text after");
$("img").before("Some text before");
Přidejte několik nových prvků pomocí after() a before()
Také metody after()a before()mohou jako parametry přebírat nekonečné množství nových prvků. Nové prvky lze generovat pomocí textu/HTML (jako jsme to udělali v příkladu výše), pomocí jQuery nebo pomocí kódu JavaScript a prvků DOM.
V následujícím příkladu vytvoříme několik nových prvků. Prvky jsou vytvořeny pomocí text/HTML, jQuery a JavaScript/DOM. Poté vložíme nové prvky do textu after()metodou (taky by to fungovalo
before()):
Příklad
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>
}
Cvičení jQuery
HTML reference jQuery
Úplný přehled všech metod jQuery HTML naleznete v naší jQuery HTML/CSS Reference .