أحدث البرامج التعليمية وتطوير الشبكة
 

jQuery - اضافة عناصر

❮ السابق التالي الفصل ❯

مع مسج، فمن السهل أن إضافة عناصر جديدة / المحتوى.

إضافة المحتوى HTML جديد

وسنتطرق في أربعة أساليب مسج التي يتم استخدامها لإضافة محتوى جديد:

  • append() - محتوى الملاحق في نهاية العناصر المحددة
  • prepend() - محتوى تدرج في بداية العناصر المحددة
  • after() - إدراج المحتوى بعد العناصر المحددة
  • before() - محتوى إدراجات قبل العناصر المحددة

مسج append() الطريقة

ومسج append() طريقة إدراج المحتوى في نهاية عناصر HTML المحدد.

مثال

$("p").append("Some appended text.");
انها محاولة لنفسك »

مسج prepend() الطريقة

ومسج prepend() طريقة إدراج المحتوى في بداية عناصر HTML المحدد.

مثال

$("p").prepend("Some prepended text.");
انها محاولة لنفسك »

إضافة عدة عناصر جديدة مع append() و prepend()

في كل من الأمثلة أعلاه، أدخلنا فقط بعض نص / HTML في بداية / نهاية عناصر HTML المحدد.

ومع ذلك، فإن كلا من append() و prepend() يمكن أن طرق اتخاذ عدد لانهائي من عناصر جديدة كمعلمات. يمكن إنشاء عناصر جديدة مع نص / HTML (مثل فعلنا في الأمثلة أعلاه)، مع مسج، أو مع شفرة جافا سكريبت وعناصر DOM.

في المثال التالي، ونحن خلق عدة عناصر جديدة. يتم إنشاء العناصر مع نص / HTML، مسج، وجافا سكريبت / DOM. ثم فإننا نضيف عناصر جديدة إلى النص مع append() طريقة (هذا من شأنه أن عملوا ل 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.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
انها محاولة لنفسك »

مسج after() و before() طرق

ومسج after() طريقة إدراج المحتوى بعد عناصر HTML المحدد.

ومسج before() طريقة إدراج المحتوى قبل عناصر HTML المحدد.

مثال

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

$("img").before("Some text before");
انها محاولة لنفسك »

إضافة عدة الجديد عناصر و after() و before()

أيضا، فإن كلا من after() و before() أساليب يمكن أن عدد لانهائي من عناصر جديدة كمعلمات. يمكن إنشاء عناصر جديدة مع نص / HTML (مثل فعلنا في المثال أعلاه)، مع مسج، أو مع شفرة جافا سكريبت وعناصر DOM.

في المثال التالي، ونحن خلق عدة عناصر جديدة. يتم إنشاء العناصر مع نص / HTML، مسج، وجافا سكريبت / DOM. ثم نحن إدراج عناصر جديدة إلى النص مع after() طريقة (هذا من شأنه أن عملوا before() أيضا):

مثال

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>
}
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»

مسج HTML المرجعي

لمحة كاملة عن أساليب مسج HTML، يرجى زيارة موقعنا مسج HTML / CSS المرجعي .


❮ السابق التالي الفصل ❯