آموزش اضافه کردن محتوا یا add به عناصر HTML

 

با درود فراوان خدمت شما علاقه مندان به آموزش های برنامه نویسی در خدمت شما هستم با قسمت جدید آموزش جی کوئری. در قسمت قبل با آموزش مقداردهی عناصر یا set در جی کوئری در خدمت شما بودیم. در این جلسه به آموزش اضافه کردن محتوا یا Add در HTML می پردازیم.


اضافه کردن محتوا یا عنصر جدید در HTML

توسط جی کوئری می توانید به راحتی محتوا (شامل متن یا تگ های HTML) را به ابتدا یا انتهای عنصر یا عناصر انتخاب شده و به قبل یا بعد از عنصر یا عناصر انتخاب شده اضافه کنید. 
برای مثال رویداد کلیک یک دکمه را طوری تعیین کنید که پس از کلیک متنی به انتهای متن <p> اضافه شود و یا عنصر جدیدی بعد از عناصر صفحه نیز اضافه گردد.

در جی کوئری 4 متد برای اضافه کردن محتوای جدید استفاده می شود:

  • append : اضافه کردن محتوا به انتهای عنصر یا عناصر انتخاب شده
  • prepend : اضافه کردن محتوا به ابتدای عنصر یا عناصر انتخاب شده
  • after :  اضافه کردن محتوا بعد از عنصر یا عناصر انتخاب شده
  • before :  اضافه کردن محتوا قبل از عنصر یا عناصر انتخاب شده

در ادامه معرفی هر یک از متدهای بالا با ذکر مثال می پردازیم.

متد append در جی کوئری

متد append یکی از متدهای Add در جی کوئری است که برای اضافه کردن محتوا به انتهای عنصر یا عناصر انتخاب شده استفاده می شود.  کلمه "append" به معنی "افزودن" است.

مثال استفاده از متد append

در مثال زیر پس از کلیک روی دکمه <button> با شناسه btn1 یک متن به انتهای عنصر <p> (به انتهای متن عنصر <p> ) و پس از کلیک روی دکمه <button> با شناسه btn2 یک تگ <li> به انتهای لیست <ul> اضافه می کنیم.

HTML

 <p>This is a paragraph for test append method in jquery</p>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>

Jquery

 $(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b> This is Appended text</b>.");
    });

    $("#btn2").click(function(){
        $("ul").append("<li>this Appended item</li>");
    });
});

متد prepend در جی کوئری

متد prepend یکی دیگر از متدهای Add در جی کوئری است که برای اضافه کردن محتوا به ابتدای عنصر یا عناصر انتخاب شده استفاده می شود. کلمه  "prepend" به معنی "اضافه کردن چیزی به ابتدای چیز دیگر" است.

مثال استفاده از متد prepend

در مثال زیر پس از کلیک روی دکمه <button> با شناسه btn1 یک متن به ابتدای عنصر <p> (به ابتدای متن عنصر <p> ) و پس از کلیک روی دکمه <button> با شناسه btn2 یک تگ <li> به ابتدای لیست <ul> اضافه می کنیم.

HTML

 <p>This is a paragraph for test append method in jquery</p>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>

Jquery

 $(document).ready(function(){
    $("#btn1").click(function(){
        $("p").perpend(" <b> This is Appended text</b>.");
    });

    $("#btn2").click(function(){
        $("ul").prepend("<li>this Appended item</li>");
    });
});

متد after در جی کوئری

متد after یکی از متدهای Add در جی کوئری است که برای اضافه کردن محتوا بعد از عنصر یا عناصر انتخاب شده استفاده می شود. کلمه "after" به معنی "بعد از" است.

مثال استفاده از متد after

در مثال زیر پس از کلیک روی دکمه <botton> یک تگ <p> قبل از تگ <p> با کلاس test اضافه می شود.


HTM

 <p> This is first paragraph <p>
<p class="test"> This is second paragraph <p>
<p> This is third paragraph <p>

<button>Insert after</button>

Jquery

 $(document).ready(function(){
    $("button").click(function(){
        $(".test").after("<b>This is paragraph after test class</b>");
    });

});

متد before در جی کوئری

متد before یکی از متدهای Add در جی کوئری است که برای اضافه کردن محتوا به قبل از عنصر یا عناصر انتخاب شده استفاده می شود.  کلمه "before" به معنی "قبل از" است.

مثال استفاده از متد before

در مثال زیر پس از کلیک روی دکمه <botton> یک تگ <p> بعد از تگ <p> با کلاس test اضافه می شود.

HTML

 <p> This is first paragraph <p>
<p class="test"> This is second paragraph <p>
<p> This is third paragraph <p>

<button>Insert after</button>

Jquery

 $(document).ready(function(){
    $("button").click(function(){
        $(".test").before("<b>This is paragraph before test class</b>");
    });

});

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

4 سال پیش

Ckamalklein

فوق العاده هستید، ممنون از شما و توضیحات کاملتون. 

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