jQuery - أضف عناصر
باستخدام jQuery ، من السهل إضافة عناصر / محتوى جديد.
أضف محتوى HTML جديد
سننظر في أربع طرق jQuery تُستخدم لإضافة محتوى جديد:
append()- يُدرج المحتوى في نهاية العناصر المحددةprepend()- يُدرج المحتوى في بداية العناصر المحددةafter()- يُدرج المحتوى بعد العناصر المحددةbefore()- يُدرج المحتوى قبل العناصر المحددة
jQuery append () الطريقة
تُدرج طريقة jQuery append()المحتوى في نهاية عناصر HTML المحددة.
مثال
$("p").append("Some appended text.");
طريقة jQuery prepend ()
تُدرج طريقة jQuery prepend()المحتوى في بداية عناصر HTML المحددة.
مثال
$("p").prepend("Some prepended text.");
أضف عدة عناصر جديدة مع append () و prepend ()
في كلا المثالين أعلاه ، قمنا بإدخال بعض النص / HTML فقط في بداية / نهاية عناصر HTML المحددة.
append()ومع ذلك ، يمكن أن تأخذ كلتا prepend()الطريقتين عددًا لا نهائيًا من العناصر الجديدة كمعلمات. يمكن إنشاء العناصر الجديدة باستخدام text / HTML (كما فعلنا في الأمثلة أعلاه) ، أو باستخدام jQuery ، أو باستخدام كود JavaScript وعناصر DOM.
في المثال التالي ، نقوم بإنشاء عدة عناصر جديدة. يتم إنشاء العناصر باستخدام text / HTML و jQuery و JavaScript / 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.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery بعد () وقبل () الطرق
تقوم طريقة jQuery after()بإدراج المحتوى بعد عناصر HTML المحددة.
تُدرج طريقة jQuery before()المحتوى قبل عناصر HTML المحددة.
مثال
$("img").after("Some text after");
$("img").before("Some text before");
أضف عدة عناصر جديدة بعد () وقبل ()
أيضًا ، يمكن أن تأخذ كلتا after()الطريقتين before()عددًا لا نهائيًا من العناصر الجديدة كمعلمات. يمكن إنشاء العناصر الجديدة باستخدام text / HTML (كما فعلنا في المثال أعلاه) ، أو باستخدام jQuery ، أو باستخدام كود JavaScript وعناصر DOM.
في المثال التالي ، نقوم بإنشاء عدة عناصر جديدة. يتم إنشاء العناصر باستخدام text / HTML و jQuery و JavaScript / 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>
}
تمارين مسج
مرجع HTML jQuery
للحصول على نظرة عامة كاملة على جميع طرق jQuery HTML ، يرجى الانتقال إلى مرجع jQuery HTML / CSS الخاص بنا .