জেকুয়েরি html() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
html() মেথড নির্বাচিত এলিমেন্টের (innerHTML) কন্টেন্ট সেট করে অথবা রিটার্ন করে।
যখন এই মেথড কন্টেন্ট রিটার্ন করার জন্য ব্যবহার হয়, এটি প্রথম মিলকৃত এলিমেন্টের কন্টেন্ট রিটার্ন করে।
যখন এই মেথডটি কন্টেন্ট সেট করার জন্য ব্যবহার করা হয়, এটি সকল মিলকৃত এলিমেন্ট ওভাররাইট করে।
পরামর্শঃ নির্বাচিত এলিমেন্টের শুধুমাত্র টেক্সট কন্টেন্ট সেট করতে বা রিটার্ন করতে text() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
কন্টেন্ট রিটার্ন:
$(selector).html()
কন্টেন্ট সেট:
$(selector).html(content)
ফাংশন ব্যবহার করে কন্টেন্ট সেট:
$(selector).html(function(index,currentcontent))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে html() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
content |
আবশ্যক। নির্বাচিত এলিমেন্টের জন্য নতুন কন্টেন্ট নির্দেশ করে (এইচটিএমএল ট্যাগ থাকতে পারে)। |
function (index,currentcontent) |
ঐচ্ছিক। একটি ফাংশন উল্লেখ করে যা নির্বাচিত এলিমেন্টের জন্য নতুন কন্টেন্ট রিটার্ন করে।
|
উদাহরণ
<!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").html("হ্যালো <b>বাংলাদেশ!</b>");
});
});
</script>
</head>
<body>
<button>সকল p এলিমেন্ট পরিবর্তন করুন</button>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
</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(){
alert($("p").html());
});
});
</script>
</head>
<body>
<button>p এলিমেন্টের কন্টেন্ট রিটার্ন করুন </button>
<p>এটি একটি <b>প্যারাগ্রাফ</b>।</p>
</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").html(function(n){
return "এই p এলিমেন্টের ইন্ডেক্স- " + n;
});
});
});
</script>
</head>
<body>
<button>p এলিমেন্টের কন্টেন্ট পরিবর্তন করুন</button>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ