آموزش جی کوئری – افزودن محتوا در jQuery

در بخش قبلی با متدهای Getter/Setter در jQuery آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه افزودن عناصر یا محتوای جدید با استفاده از jQuery می پردازیم.

افزودن محتوا در jQuery

جی کوئری چندین متد مثل append(), prepend(), html(), text(), before(), after(), wrap() ارایه داده است که به ما امکان افزودن محتوای جدید به یک المان را می دهد.

متدهای html() و text() را در بخش قبلی دیدیم. همچنین آموزش اضافه کردن محتوا با appendTo() را قبلا ارایه دادیم. بنابراین در اینجا بقیه موارد باقی را بررسی می کنیم.

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

متد append() در جی کوئری برای افزودن محتوا به آخر المان های انتخابی استفاده می شود.

مثال زیر کد HTMLی را به همه پاراگراف های داخل سند اضافه می کند. همچنین با کلیک روی دکمه نیز متنی به عنصر دربرگیرنده اضافه می شود.

<script type="text/javascript">
$(document).ready(function(){
    // Append all paragraphs
    $("p").append(' <a href="#">read more...</a>');
    
    // Append an element with ID container
    $("button").click(function(){
       $("#container").append("This is demo text.");
    });
});
</script>

$(document).ready(function(){

// Append all paragraphs

$("p").append(' <a href="#">read more...</a>');

// Append an element with ID container

$("button").click(function(){

$("#container").append("This is demo text.");

});

</script>

نکته: محتوا یا المان های قرار داده شده با متدهای append() و prepend() داخل المان انتخاب شده اضافه می شوند.

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

متد prepend() در جی کوئری برای افزودن محتوا به اول المان های انتخابی استفاده می شود.

<script type="text/javascript">
$(document).ready(function(){
    // Prepend all paragraphs
    $("p").prepend("<strong>Note:</strong> ");
    
    // Prepend an element with ID container
    $("button").click(function(){
       $("#container").prepend("This is demo text.");
    });
});
</script>

$(document).ready(function(){

// Prepend all paragraphs

$("p").prepend("<strong>Note:</strong> ");

// Prepend an element with ID container

$("button").click(function(){

$("#container").prepend("This is demo text.");

});

</script>

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

متدهای append() و prepend() قابلیت پاس دادن چندین آرگومان به عنوان ورودی, را پشتیبانی می کنند.

کد جی کوئری زیر یک المان <h1>, <p> و <img> را به <body> به عنوان سه گره فرزند آخر اضافه می کند.

<script type="text/javascript">
$(document).ready(function(){
    var newHeading = "<h1>Important Note:</h1>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("body").append(newHeading, newParagraph, newImage);
});
</script>

$(document).ready(function(){

var newHeading = "<h1>Important Note:</h1>";

var newParagraph = document.createElement("p");

newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";

var newImage = $('<img src="images/smiley.png" alt="Symbol">');

$("body").append(newHeading, newParagraph, newImage);

});

</script>

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

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

مثال زیر یک پاراگراف را قبل از عنصر دربرگیرنده اضافه می کنید. از طرف دیگر با کلیک روی دکمه می توانید یک تصویر را قبل از المان <h1> اضافه کنید.

<script type="text/javascript">
$(document).ready(function(){
    // Add content before an element with ID container
    $("#container").before("<p>&mdash; The Beginning &mdash;</p>");
    
    // Add content before headings
    $("button").click(function(){
        $("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
    });
});
</script>

$(document).ready(function(){

// Add content before an element with ID container

$("#container").before("<p>— The Beginning —</p>");

// Add content before headings

$("button").click(function(){

$("h1").before('<img src="images/marker-left.gif" alt="Symbol">');

});

</script>

نکته: محتوا یا المان های اضافه شده با متدهای after() و before() خارج از المان های انتخابی قرار می گیرند.

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

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

مثال زیر یک پاراگراف را بعد از عنصر دربرگیرنده اضافه می کنید. از طرف دیگر با کلیک روی دکمه می توانید یک تصویر را قبل از المان <h1> اضافه کنید.

<script type="text/javascript">
$(document).ready(function(){
    // Add content after an element with ID container
    $("#container").after("<p>&mdash; The End &mdash;</p>");
    
    // Add content after headings
    $("button").click(function(){
        $("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
    });
});
</script>

$(document).ready(function(){

// Add content after an element with ID container

$("#container").after("<p>— The End —</p>");

// Add content after headings

$("button").click(function(){

$("h1").after('<img src="images/marker-right.gif" alt="Symbol">');

});

</script>

افزودن چندین المان با متد after() و before()

متدهای after() و before() قابلیت پاس دادن چندین آرگومان به عنوان ورودی, را پشتیبانی می کنند.

کد جی کوئری زیر یک المان <h1>, <p> و <img> را به <body> قبل از <p> اضافه می کند.

<script type="text/javascript">
$(document).ready(function(){
    var newHeading = "<h2>Important Note:</h2>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("p").before(newHeading, newParagraph, newImage);
});
</script>

$(document).ready(function(){

var newHeading = "<h2>Important Note:</h2>";

var newParagraph = document.createElement("p");

newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";

var newImage = $('<img src="images/smiley.png" alt="Symbol">');

$("p").before(newHeading, newParagraph, newImage);

});

</script>

متد wrap() جی کوئری

متد wrap() در جی کوئری برای دربرگرفتن یک ساختار HTML برای المان های انتخابی اسفتاده می شود.

کد jQuery در مثال زیر المان های .container را با المان <div> و کلاس .wrapper در بر می گیرد.

همچنین با کلیک روی دکمه می توانید تمام محتوای داخلی المان های پارارگراف را ابتدا با <b> و سپس المان <em> دربربگیرید.

<script type="text/javascript">
$(document).ready(function(){
    // Wrap elements with class container with HTML
    $(".container").wrap('<div class="wrapper"></div>');
    
    // Wrap paragraph's content with HTML
    $("button").click(function(){
        $("p").contents().wrap("<em><b></b></em>");
    });
});
</script>

$(document).ready(function(){

// Wrap elements with class container with HTML

$(".container").wrap('<div class="wrapper"></div>');

// Wrap paragraph's content with HTML

$("button").click(function(){

$("p").contents().wrap("<em><b></b></em>");

});

</script>

به زبان ساده تر المان سلکت شده را داخل ساختار HTMLی که به عنوان مقدار آرگومان wrap() دادیم قرار می دهد.

امیدوارم در این بخش آموزش جی کوئری, از افزودن محتوا در jQuery نهایت استفاده را برده باشید.

در بخش بعدی با نحوه حذف محتوا یا المان با جی کوئری, آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

آموزش جی کوئری – افزودن محتوا در jQuery

افزودن محتوا در jQuery

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

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

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

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

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

افزودن چندین المان با متد after() و before()

متد wrap() جی کوئری

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه