জেকুয়েরি insertBefore() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
insertBefore() মেথড নির্বাচিত এলিমেন্টের পূর্বে এইচটিএমএল এলিমেন্ট অন্তর্ভুক্ত করে।
পরামর্শঃ নির্বাচিত এলিমেন্টের পরে এইচটিএমএল এলিমেন্ট অন্তর্ভুক্ত করতে, insertAfter() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(content).insertBefore(selector)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে insertBefore() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বর্নণা |
|---|---|
content |
আবশ্যক। যে কন্টেন্ট অন্তর্ভুক্ত করা হবে সেটিকে করতে উল্লেখ করে (অবশ্যই এইচটিএমএল ট্যাগ থাকতে হবে)। নোট: যদি কন্টেন্ট একটি বিদ্যমান এলিমেন্ট হয় তাহলে এটি এর বর্তমান অবস্থান থেকে সরে যাবে এবং নির্বাচিত এলিমেন্টের পূর্বে অন্তর্ভুক্ত হবে। |
selector |
আবশ্যক। যে এলিমেন্টের পূর্বে কন্টেন্ট অন্তর্ভুক্ত করা হবে সেটিকে নির্দেশ করে। |
উদাহরণ
প্রত্যেক <p> এলিমেন্টের পূর্বে একটি <span> এলিমেন্ট অন্তর্ভুক্তকরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span>Satt Academy</span>").insertBefore("p");
});
});
</script>
</head>
<body>
<button>প্রতিটি p এলিমেন্টের পূর্বে স্পেন এলিমেন্ট ইনসার্ট করুন</button>
<br><br>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
উদাহরণ
একটি বিদ্যমান এলিমেন্ট অন্তর্ভুক্তকরন
প্রতিটি নির্বাচিত এলিমেন্টের পূর্বে insertBefore() মেথড ব্যবহার করে কিভাবে একটি বিদ্যমান এলিমেন্ট অন্তর্ভুক্ত করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").insertBefore("p");
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<div>হ্যালো বাংলাদেশ!</div>
<button>div এলিমেন্টকে প্রত্যেক p এলিমেন্টের পূর্বে নেওয়ার জন্য এখানে ক্লিক করুন</button>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ