با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش jQuery ، را دنبال می کنند. در بخش های قبلی، چگونگی دسترسی به محتوا و ویژگی های عناصر html، در jQuery. و همچنین تغییر دادن مقادیر آن ها را، بررسی کردیم. در ادامه این مباحث، در این بخش به مبحث افزودن عناصر html در jQuery یا Add Elements در jQuery ، می پردازیم.
تاکنون مراحل چگونگی دستیابی به محتوای عناصر در jQuery را، در بخش کار با محتوا و ویژگی های HTML در jQuery و تغییر دادن مقادیر و محتوای عناصر را در بخش تنظیم مقادیر و ویژگی های HTML در jQuery، بررسی کردیم.
در ادامه ی بخش، به مبحث افزودن عناصر html یا Add Elements در jQuery ، پرداختیم.
در jQuery، به آسانی می توان ، عناصر html را اضافه کرد.
ما در این بخش، به چهار روش جی کوئری که برای اضافه کردن محتوای جدید استفاده می شود اشاره می کنیم:
از تابع ()append ، برای افزودن محتوا به انتهای محتوای جاری، یک عنصر استفاده می شود.
مثال:
1 | $("p").append("Some appended text."); |
از تابع ()prepend ، برای افزودن محتوا به ابتدای محتوای عناصر استفاده می شود:
1 | $("p").prepend("Some prepended text."); |
در jQuery ، با استفاده از توابع ()append و ()prepend ،می توان بی نهایت عنصر جدید را، به روشهای مختلفی که تاکنون به برخی اشاره شده، ایجاد کرد.
در مثال زیر ، به روشهای مختلف از جمله DOM ، استفاده از jQuery ،کد JavaScript و… عناصر جدید با محتوای جدید،را ایجاد کرده ایم:
1 2 3 4 5 6 7 | 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 } |
تابع ()after ، برای درج محتوا ، قبل از عنصر انتخاب شده، استفاده می شود.
از تابع ()before ، برای افزودن محتوا، به قبل از عنصر انتخاب شده، استفاده می شود.
مثال:
1 2 3 | $("img").after("Some text after"); $("img").before("Some text before"); |
در jQuery ، می توان، با استفاده از توابع ()after و ()before، بی نهایت عنصر جدید را، به روشهای مختلفی که تاکنون به برخی اشاره شده، ایجاد کرد.
در مثال زیر ، به روشهای مختلف از جمله DOM ، استفاده از jQuery ،کد JavaScript و… عناصر جدید با محتوای جدید،را ایجاد کرده ایم:
1 2 3 4 5 6 7 | 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 ، بدست آورد، و آن را ، تغییر داد. در ادامه ، در این بخش به موضوع افزودن عناصر html یا Add Elements در jQuery ، پرداختیم. امیدواریم که این مطلب مورد توجه و استفاده ی شما، قرار گرفته باشد.