جایگزین کردن عنصر با jQuery

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

جایگزین کردن عنصر با jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. جی کوئری متد ()replaceWith را برای جایگزینی محتوای HTML موجود با یک محتوای جدید در یک سند HTML ارائه می‌دهد.

متد replaceWith() در jQuery

متد replaceWith() محتوا را از DOM حذف می‌کند و محتوای جدیدی را به جای آن قرار می‌دهد. در اینجا نحو و ساختار ساده برای استفاده از این متد آمده است:

$(selector).replaceWith(newContent);

متد ()replaceWith تمام داده‌ها و کنترل کننده‌های رویداد مرتبط با گره‌های حذف شده را حذف می‌کند.

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

<div class="container">
   <h2>jQuery replaceWith() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
   <div class="hello">Hello</div>
</div>

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

$( ".hello" ).replaceWith("<h2>New Element</h2>" );

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

<div class="container">
   <h2>jQuery remove() Method</h2>
   <h2>New Element</h2>
   <div class="goodbye">Goodbye</div>
   <h2>New Element</h2>
</div>

اگر تعدادی عنصر تودرتو در داخل <“div class=”hello> داشتیم، آن‌ها نیز حذف می‌شدند.

مثال جایگزین کردن عنصر با متد replaceWith() در 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(){
         $( ".hello" ).replaceWith("<h2>New Element</h2>" );
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery replaceWith() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
      <div class="hello">Hello</div>
   </div>
   <br>
   
   <button>Replace Element</button>
</body>
</html>

مثالی دیگر

مثال زیر همه پاراگراف‌ها را با Brilliant جایگزین می‌کند.

<!doctype html>
<html lang="en">
<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" ).replaceWith( "<b>Brilliant</b>" );
      });
   });
</script>
</head>
<body>
   <h2>jQuery replaceWith() Method</h2>
   <p>Zara</p>
   <p>Nuha</p>
   <p>Ayan</p>
 
   <button>Replace Element</button>
</body>
</html>

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

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

میانگین رتبه : 5/5 - تعداد رای : 1