jQuery - Voeg elemente by
Met jQuery is dit maklik om nuwe elemente/inhoud by te voeg.
Voeg nuwe HTML-inhoud by
Ons sal kyk na vier jQuery-metodes wat gebruik word om nuwe inhoud by te voeg:
append()- Voeg inhoud aan die einde van die geselekteerde elemente inprepend()- Voeg inhoud aan die begin van die geselekteerde elemente inafter()- Voeg inhoud in na die geselekteerde elementebefore()- Voeg inhoud voor die geselekteerde elemente in
jQuery append() Metode
Die jQuery append()-metode voeg inhoud AAN DIE EINDE van die geselekteerde HTML-elemente in.
Voorbeeld
$("p").append("Some appended text.");
jQuery prepend() Metode
Die jQuery prepend()-metode voeg inhoud AAN DIE BEGIN van die geselekteerde HTML-elemente in.
Voorbeeld
$("p").prepend("Some prepended text.");
Voeg verskeie nuwe elemente by met append() en prepend()
In beide voorbeelde hierbo het ons net 'n bietjie teks/HTML aan die begin/einde van die geselekteerde HTML-elemente ingevoeg.
Beide die append()en prepend()metodes kan egter 'n oneindige aantal nuwe elemente as parameters neem. Die nuwe elemente kan gegenereer word met teks/HTML (soos ons in die voorbeelde hierbo gedoen het), met jQuery, of met JavaScript-kode en DOM-elemente.
In die volgende voorbeeld skep ons verskeie nuwe elemente. Die elemente word geskep met teks/HTML, jQuery en JavaScript/DOM. Dan voeg ons die nuwe elemente by die teks met die append()metode (dit sou ook vir gewerk
prepend()het):
Voorbeeld
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
}
jQuery after() en before() Metodes
Die jQuery after()-metode voeg inhoud NA die geselekteerde HTML-elemente in.
Die jQuery before()-metode voeg inhoud VOOR die geselekteerde HTML-elemente in.
Voorbeeld
$("img").after("Some text after");
$("img").before("Some text before");
Voeg verskeie nuwe elemente by met after() en before()
Beide die after()en before()metodes kan ook 'n oneindige aantal nuwe elemente as parameters neem. Die nuwe elemente kan gegenereer word met teks/HTML (soos ons in die voorbeeld hierbo gedoen het), met jQuery, of met JavaScript-kode en DOM-elemente.
In die volgende voorbeeld skep ons verskeie nuwe elemente. Die elemente word geskep met teks/HTML, jQuery en JavaScript/DOM. Dan voeg ons die nuwe elemente by die teks in met die after()metode (dit sou ook vir gewerk
before()het):
Voorbeeld
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>
}
jQuery Oefeninge
jQuery HTML-verwysing
Vir 'n volledige oorsig van alle jQuery HTML-metodes, gaan asseblief na ons jQuery HTML/CSS-verwysing .