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

জেকুয়েরি prepend() মেথড


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


সংজ্ঞা এবং ব্যবহার

prepend() মেথড নির্বাচিত এলিমেন্টের শুরুতে নির্দিষ্ট কন্টেন্ট অন্তর্ভুক্ত করে।

পরামর্শঃ নির্বাচিত এলিমেন্টের শেষে কন্টেন্ট অন্তর্ভুক্ত করতে, append() মেথড ব্যবহার করুন।


সিনট্যাক্স ও ব্যাখ্যা

$(selector).prepend(content,function(index,html))

প্যারামিটার ও তাদের ভ্যালু

নিচের টেবিলে prepend() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ

প্যারামিটার বিবরণ
content আবশ্যক। যে কন্টেন্ট অন্তর্ভুক্ত করা হবে সেটিকে নির্দেশ করে (এইচটিএমএল ট্যাগ থাকতে পারে)।

সম্ভাব্য ভ্যালুগুলো হলো:

  • এইচটিএমএল এলিমেন্ট
  • জেকুয়েরি অবজেক্ট
  • ডোম এলিমেন্ট
function(index,html) ঐচ্ছিক। একটি ফাংশন উল্লেখ করে যা কন্টেন্ট অন্তর্ভুক্ত করতে রিটার্ন করে
  • index -সেট এর মধ্যে এলিমেন্টের ইনডেক্স পজিশন রিটার্ন করে
  • html - নির্বাচিত এলিমেন্টের বর্তমান এইচটিএমএলকে রিটার্ন করে

উদাহরণ

<!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(){
    $("#test1").click(function(){
        $("p").prepend("<b>প্রিপেন্ড টেক্সট</b> ");
    });
    $("#test2").click(function(){
        $("ol").prepend("<li>প্রিপেন্ড লিস্ট আইটেম</li>");
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

<ol>
  <li>লিস্ট আইটেম ১</li>
  <li>লিস্ট আইটেম ২</li>
  <li>লিস্ট আইটেম ৩</li>
</ol>

<button id="test1">প্রিপেন্ড টেক্সট</button>
<button id="test2">প্রিপেন্ড লিস্ট আইটেম</button>
</body>
</html>

ফলাফল




উদাহরণ

prepend() - এইচটিএমএল, জেকুয়েরি এবং ডোম দ্বারা কন্টেন্ট তৈরী

prepend() মেথডের দ্বারা কন্টেন্ট অন্তর্ভুক্ত করা।

উদাহরণ

<!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>
function prependText() {
    var txt1 = "<p>টেক্সট</p>";              // এইচটিএমএল দ্বারা টেক্সট তৈরি
    var txt2 = $("<p></p>").text("টেক্সট");  // জেকুয়েরি দ্বারা টেক্সট তৈরি
    var txt3 = document.createElement("p");
    txt3.innerHTML = "টেক্সট";               // ডোম দ্বারা টেক্সট তৈরি
    $("p").prepend(txt1, txt2, txt3);
}
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>

<button onclick="prependText()">প্রিপেন্ড টেক্সট</button>
</div>

</body>
</html>

ফলাফল




ফাংশন ব্যবহার করে শুরুতে কন্টেন্ট অন্তর্ভুক্ত করা

ফাংশন ব্যবহার করে নির্বাচিত এলিমেন্টের শুরুতে কন্টেন্ট অন্তর্ভুক্ত করা যায়।

উদাহরণ

<!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(){
        $("p").prepend(function(n){
            return "<b>এই p এলিমেন্টের ইন্ডেক্স " + n + "</b>. ";
        });
    });
});
</script>
</style>
</head>
<body>

<h3>এটি একটি হেডার</h3>

<p>এট একটি অনুচ্ছেদ</p>
<p>এটি অন্য একটি অনুচ্ছেদ।</p>

<button>প্রত্যেক p এলিমেন্টের শুরুতে কন্টেন্ট ইন্সার্ট করুন</button>

</body>
</html>

ফলাফল




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