জেকুয়েরি add() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
add() মেথড বিদ্যমান এলিমেন্টের গ্রুপে এলিমেন্ট যুক্ত করে।
এই মেথডটি সম্পূর্ন ডকুমেন্টের মধ্যে অথবা প্রাসঙ্গিক এলিমেন্টের মধ্যে এলিমেন্ট যুক্ত করে, যদি context প্যারামিটার নির্দিষ্ট করে দেওয়া হয়।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).detach()$(selector).add(element,context)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে add() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| element | আবশ্যক। একটি বিদ্যমান এলিমেন্টের গ্রুপে যুক্ত করার জন্য একটি সিলেক্টর এক্সপ্রেশন, একটি জেকুয়েরি অবজেক্ট, এক অথবা তার অধিক এলিমেন্ট অথবা এইচটিএমএল স্নিপেটকে বুঝায়। |
| context | ঐচ্ছিক। ডকুমেন্টের একটি পয়েন্টকে বুঝায়, যেখান থেকে সিলেক্টর এক্সপ্রেশন ম্যাচ করা শুরু করবে। |
add() মেথড সংক্রান্ত উদাহরণ
বিদ্যমান এলিমেন্টের গ্রুপে <p> এবং <span> এলিমেন্ট যুক্ত (<h1>):
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h3").add("p").add("span").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>এই উদাহরণে h3 এলিমেন্টের মত p এবং স্পেন এলিমেন্টে একই সিএসএস স্টাইল হবে।</div>
<h3>স্যাট একাডেমী</h3>
<p>একটি p এলিমেন্ট।</p>
<p>আরেকটি p এলিমেন্ট।</p>
<span>একটি স্পেন এলিমেন্ট।</span>
<span>একটি স্পেন এলিমেন্ট।</span><br><br>
</body>
</html>
ফলাফল
DOM
DOMএলিমেন্টের রেফারেন্স ব্যবহার করে, একটি বিদ্যমান <p> এলিমেন্টের গ্রুপে একটি span এলিমেন্ট যুক্ত করুন।
উদাহরণঃ1
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").add(document.getElementsByTagName("span")[0]).css("background-color", "aqua");
});
</script>
</head>
<body>
<p>একটি p এলিমেন্ট।</p>
<p>আরেকটি p এলিমেন্ট।</p>
<span>একটি স্পেন এলিমেন্ট।</span>
<span>একটি স্পেন এলিমেন্ট।</span><br><br>
<div>এই উদাহরণে প্রথম স্পেন এলিমেন্টের জন্য কিছু সিএসএস স্টাইল যুক্ত করা হয়েছে (ইনডেক্স ০), p এলিমেন্টের অবস্থানের জন্য।</div>
</body>
</html>
ফলাফল
এইচটিএমএল স্নিপেট
একটি বিদ্যমান <p> এলিমেন্টের গ্রুপে একটি span এলিমেন্ট যুক্ত করতে এইচটিএমএল স্নিপেটের ব্যবহার।
উদাহরণঃ2
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").add("<br><span>নতুন একটি span এলিমেন্ট।</span>").appendTo("p");
});
});
</script>
</head>
<body>
<button>একটি span এলিমেন্ট যুক্ত করুন</button>
<p>এটি একটি p এলিমেন্ট।</p>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ