Cu jQuery, este ușor de a adăuga noi elemente / conținut.
Adăugați nou conținut HTML
Ne vom uita la patru metode de jQuery, care sunt folosite pentru a adăuga conținut nou:
- append() - conținut inserturi la capătul elementelor selectate
- prepend() - conținut inserturi la începutul elementelor selectate
- after() - Inserează conținutul după elementele selectate
- before() de a before() - conținutul inserturi înaintea elementelor selectate
jQuery append() Metoda
JQuery append() Metoda introduce conținutul LA TERMINAREA elementelor HTML selectate.
jQuery prepend() Metoda
JQuery prepend() Metoda introduce conținutul LA INCEPUTUL elementelor HTML selectate.
Adăugați mai multe elemente noi , cu append() și prepend()
În ambele exemple de mai sus, am introdus doar un text / HTML la începutul / sfârșitul elementelor HTML selectate.
Cu toate acestea, atât append() și prepend() metode pot lua un număr infinit de elemente noi ca parametri. Noile elemente pot fi generate cu text / HTML (cum am făcut în exemplele de mai sus), cu jQuery, sau cu cod JavaScript și elemente DOM.
În exemplul următor, vom crea mai multe elemente noi. Elementele sunt create cu text / HTML, jQuery, JavaScript și / DOM. Apoi vom adăuga noi elemente la textul cu append() metoda (acest lucru ar fi lucrat pentru prepend() prea):
Exemplu
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.";
$("p").append(txt1, txt2, txt3);
// Append the new elements
} Încearcă - l singur » jQuery after() și mai before() Metode
JQuery after() metoda introduce conținutul după elementele HTML selectate.
JQuery before() metoda introduce conținutul înainte de elementele HTML selectate.
Exemplu
$("img").after("Some text after");
$("img").before("Some text before");
Încearcă - l singur » Se adaugă câteva elemente noi Cu after() și before()
De asemenea, atât after() și before() metode pot lua un număr infinit de elemente noi ca parametri. Noile elemente pot fi generate cu text / HTML (cum am făcut în exemplul de mai sus), cu jQuery, sau cu cod JavaScript și elemente DOM.
În exemplul următor, vom crea mai multe elemente noi. Elementele sunt create cu text / HTML, jQuery, JavaScript și / DOM. Apoi vom introduce noi elemente text cu after() metoda (acest lucru ar fi lucrat pentru mai before() prea):
Exemplu
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>
} Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»
jQuery HTML de referință
Pentru o prezentare completă a tuturor metodelor jQuery HTML, vă rugăm să accesați pagina jQuery HTML / CSS de referință .