জেকুয়েরি prepend() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
prepend() মেথড নির্বাচিত এলিমেন্টের শুরুতে নির্দিষ্ট কন্টেন্ট অন্তর্ভুক্ত করে।
পরামর্শঃ নির্বাচিত এলিমেন্টের শেষে কন্টেন্ট অন্তর্ভুক্ত করতে, append() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).prepend(content,function(index,html))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে prepend() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
content |
আবশ্যক। যে কন্টেন্ট অন্তর্ভুক্ত করা হবে সেটিকে নির্দেশ করে (এইচটিএমএল ট্যাগ থাকতে পারে)।
সম্ভাব্য ভ্যালুগুলো হলো:
|
function(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>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ