জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
ফোরাম
 

জেকুয়েরি 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>

ফলাফল




« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ