اضافه کردن عنصر با jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 7 دقیقه آخرین بروز رسانی: 13 مرداد 1401

اضافه کردن عنصر با jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. jQuery روش‌های مختلفی را برای افزودن عناصر DOM جدید در سند HTML موجود ارائه می‌دهد. می‌توانید این عناصر جدید را در مکان‌های مختلف (قبل، بعد از هر یک از برچسب‌های موجود) بر اساس نیاز خود اضافه کنید.

متد append() در jQuery

متد append() محتوا را در انتهای هر عنصر (های) مطابقت داده شده اضافه می‌کند. با این متد همچنین می‌توانید چندین عنصر را در یک فراخوانی تابع اضافه کنید.

ساختار متد

در اینجا نحو و ساختار ساده برای استفاده از این متد آمده است:

$(selector).append(content, [content]);

در اینجا پارامتر content می‌تواند یک رشته HTML، یک عنصر DOM، گره متن، آرایه‌ای از عناصر و گره‌های متنی یا شی jQuery برای درج در انتهای هر عنصر در مجموعه عناصر منطبق باشد.

محتوای HTML زیر را در نظر بگیرید:

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

حال اگر متد append() را به صورت زیر اعمال کنیم:

$( ".inner" ).append( "<p>Zara</p>" );

نتیجه زیر را ایجاد خواهد کرد:

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello
   <p>Zara</p>
   </div>
   <div class="inner">Goodbye
   <p>Zara</p>
   </div>
</div>

اضافه کردن عنصر با jQuery – مثال

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").append("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery append() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

متد appendTo() در jQuery

متد appendTo() همان وظیفه‌ای را انجام می‌دهد که توسط append() ایجاد می‌شود. تفاوت عمده این دو به طور خاص در ساختار، قرار دادن محتوا و هدف است. ساختار متد appendTo() در زیر آمده است:

$(content).appendTo(selector);

اضافه کردن عنصر با jQuery – مثال

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").appendTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery appendTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

متد after() در jQuery

متد after() محتوا را پس از مطابقت هر عنصر اضافه می‌کند. همچنین می‌توانید با این متد چندین عنصر را در یک فراخوانی تابع وارد کنید. ساختار متد after() در زیر آمده است:

$(selector).after(content, [content]);

محتوای HTML زیر را در نظر بگیرید:

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

حال اگر متد after() را به صورت زیر اعمال کنیم:

$( ".inner" ).after( "<p>Zara</p>" );

نتیجه زیر را ایجاد خواهد کرد:

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <p>Zara</p>
   <div class="inner">Goodbye</div>
   <p>Zara</p>
</div>

اضافه کردن عنصر با jQuery – مثال

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").after("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery after() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

متد insertAfter() در jQuery

متد insertAfter() محتوا را پس از تطبیق هر عنصر اضافه می‌کند. متدهای after() و insertAfter() یک کار را انجام می‌دهند؛ تفاوت عمده به طور خاص در نحو، قرار دادن محتوا و هدف است. ساختار متد insertAfter() در زیر آمده است:

$(content).insertAfter(selector);

اضافه کردن عنصر با jQuery – مثال

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").insertAfter(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertAfter() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

متد prepend() در jQuery

متد prepend() محتوا را در ابتدای هر عنصر (های) مطابقت داده شده اضافه می‌کند. شما همچنین می‌توانید چندین عنصر را در یک فراخوانی یک تابع اضافه کنید. ساختار متد prepend() در زیر آمده است:

$(selector).prepend(content, [content]);

محتوای HTML زیر را در نظر بگیرید:

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

حال اگر متد prepend() را به صورت زیر اعمال کنیم:

$( ".inner" ).prepend( "<p>Zara</p>" );

نتیجه زیر را ایجاد خواهد کرد:

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">
   <p>Zara</p>
   Hello
   </div>
   <div class="inner">
   <p>Zara</p>
   Goodbye
   </div>
</div>

مثال

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").prepend("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prepend() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

متد prependTo() در jQuery

متد prependTo() همان وظیفه‌ای را انجام می‌دهد که توسط prepend() انجام می‌شود. تفاوت عمده به طور خاص در نحو، قرار دادن محتوا و هدف است. ساختار متد prependTo() در زیر آمده است:

$(content).prependTo(selector);

مثال

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").prependTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prependTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

متد before() در jQuery

متد before() محتوا را قبل از هر عنصر مطابقت داده شده اضافه می‌کند. همچنین می‌توانید چندین عنصر را در یک فراخوانی تابع وارد کنید. ساختار متد before() در زیر آمده است:

$(selector).before(content, [content]);

محتوای HTML زیر را در نظر بگیرید:

<div class="container">
   <h2>jQuery before() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

حال اگر متد after() را به صورت زیر اعمال کنیم:

$( ".inner" ).before( "<p>Zara</p>" );

نتیجه زیر را ایجاد خواهد کرد:

<div class="container">
   <h2>jQuery before() Method</h2>
   <p>Zara</p>
   <div class="inner">Hello</div>
   <p>Zara</p>
   <div class="inner">Goodbye</div>
</div>

اضافه کردن عنصر با jQuery – مثال

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").before("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery before() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

متد insertBefore() در jQuery

متد insertBefore() محتوا را قبل از مطابقت هر عنصر اضافه می‌کند. متدهای Before() و insertBefore() یک کار را انجام می دهند. تفاوت عمده آن‌ها به طور خاص در نحو، قرار دادن محتوا و هدف است. ساختار متد insertBefore() در زیر آمده است:

$(content).insertBefore(selector);

اضافه کردن عنصر با jQuery – مثال

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").insertBefore(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertBefore() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

مطالعه مقاله مرجع Html/Css در jQuery برای دسترسی به لیست کامل متدهای Html/Css در جی کوئری به شما پیشنهاد می‌شود؛ امیدواریم از مطالعه این مقاله آموزش jQuery لذت برده باشید. لطفاً نظرات خود را با ما به اشتراک بگذارید و سئوالات خود را در بخش نظرات مطرح کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊