آموزش افزودن عناصر در jQuery

Query – افزودن المان ها

با پا به عرصه گذاشتن jQuery، افزودن عناصر/محتوای HTML جدید به طور چشمگیری آسان شد.

افزودن محتوای جدید HTML

در این مبحث به تشریح چهار متد که برای افزودن المان جدید با آن ها سروکار داریم خواهیم پرداخت:

()append – افزودن محتوای جدید به انتهای عناصر انتخابی

()prepend – الحاق کردن محتوای جدید به ابتدای المان های انتخاب شده

()after – ضمیمه کردن محتوای جدید بعد از عناصر انتخابی

()before – افزودن محتوای جدید قبل از عناصر انتخاب شده

متد ()append

این متد به منظور افزودن محتوای جدید به انتهای عناصر انتخابی بکار می رود.

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

$(document).ready(function () {
$(“#btn1”).click(function () {
$(“p”).append(” Appended text.”);
});
$(“#btn2”).click(function () {
$(“ol”).append(“

  • Appended item

    • “);
    });
    });

    متد prepend()

    جهت الحاق کردن محتوای جدید به ابتدای المان های انتخاب شده مورد استفاده قرار می گیرد.

    نمونه دو
    ?
    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰

    $(document).ready(function () {
    $(“#btn1”).click(function () {
    $(“p”).prepend(“Prepended text. “);
    });
    $(“#btn2”).click(function () {
    $(“ol”).prepend(“

  • Prepended item

    • “);
    });
    });

    افزودن چندین المان جدید با استفاده از متدهای append() و prepend()

    همان طور که مشاهده می کنید در هر دو نمونه ی فوق به انتها یا ابتدای المان های انتخابی تنها یک مقدار پیوست شده است.

    اما تعداد المان هایی که به عنوان پارامترهای ورودی می توان به دو متد append() و prepend() ارسال کرد می تواند نامحدود باشد. عنصر جدید را می توان مانند یک متن HTML جدید به متدهای append() و prepend()اعلان کرد (مانند آنچه در مثال های فوق انجام دادیم)، اما با jQuery و جاوا اسکریپت نیز می توان المان جدید را ساخته و تعریف کرد.

    در این مثال به سه روش مختلف، سه المان

    ساخته، سپس با استفاده از متد ()append آنها را به انتهای تگ ضمیمه کرده ایم(برای متد prepend نیز قابل استفاده می باشد):

    نمونه سه
    ?
    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹

    function appendText() {
    var txt1 = “

    Text.

    “; // Create text with HTML
    var txt2 = $(“

    “).text(“Text.”); // Create text with jQuery
    var txt3 = document.createElement(“p”);
    txt3.innerHTML = “Text.”; // Create text with DOM
    $(“body”).append(txt1, txt2, txt3); // Append new elements
    }

    متدهای after() و before()

    متد after() محتوای جدید را بعد از المان های انتخابی HTML درج می کند.

    متد before() محتوای جدید را قبل از المان های انتخابی HTML درج می کند.

    نمونه چهار
    ?
    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰

    $(document).ready(function () {
    $(“#btn1”).click(function () {
    $(“img”).before(“Before“);
    });
    $(“#btn2”).click(function () {
    $(“img”).after(“After“);
    });
    });

    اضافه کردن چند عنصر جدید با متدهای ()after و ()before

    پارامترهای ورودی، در دو متد ()after و ()before نیز می تواند نامحدود باشد.به عبارت دیگر تعداد المان هایی که به عنوان پارامترهای ورودی می توان به دو متد ()after و ()before ارسال کرد می تواند نامحدود باشد.

    در نمونه ی زیر به سه روش مختلف سه المان جدید ایجاد کرده، سپس به کمک ()after آنها را به بعد از تگ الصاق کرده ایم:

    نمونه پنج
    ?
    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹

    function afterText() {
    var txt1 = “I “; // Create element with HTML
    var txt2 = $(““).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
    }