Ultimele tutoriale de dezvoltare web
 

jQuery - Adăugați elemente

❮ Anterior Urmatorul capitol ❯

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.

Exemplu

$("p").append("Some appended text.");
Încearcă - l singur »

jQuery prepend() Metoda

JQuery prepend() Metoda introduce conținutul LA INCEPUTUL elementelor HTML selectate.

Exemplu

$("p").prepend("Some prepended text.");
Încearcă - l singur »

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ță .


❮ Anterior Urmatorul capitol ❯