জেকুয়েরি - নতুন এলিমেন্ট যুক্ত করা
জেকুয়েরির মাধ্যমে ডকুমেন্টের যেকোনো জায়গায় খুব সহজে নতুন এইচটিএমএল এলিমেন্ট/কন্টেন্ট যুক্ত করা যায়।
নতুন এইচটিএমএল কন্টেন্ট যুক্ত করা
জেকুয়েরিতে আমরা চারভাবে নতুন কন্টেন্ট যুক্ত করতে পারি। যথাঃ
append()মেথড নির্বাচিত এলিমেন্টের শেষে নতুন কন্টেন্ট যুক্ত করে।prepend()মেথড নির্বাচিত এলিমেন্টের শুরুতে নতুন কন্টেন্ট যুক্ত করে।after()মেথড নির্বাচিত এলিমেন্টের পরে নতুন কন্টেন্ট যুক্ত করে।before()মেথড নির্বাচিত এলিমেন্টের আগে নতুন কন্টেন্ট যুক্ত করে।
জেকুয়েরি append() মেথড
জেকুয়েরি append() মেথড নির্বাচিত(Selected) এলিমেন্টের শেষে নতুন কন্টেন্ট যুক্ত করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#append-text").click(function(){
$("p").append(" <b>append() মেথড দ্বারা যুক্ত টেক্সট!!</b>.");
});
$("#append-list").click(function(){
$("ol").append("<li>append() মেথড দ্বারা যুক্ত লিস্ট আইটেম!!</li>");
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
<ol>
<li>লিস্ট আইটেম ১</li>
<li>লিস্ট আইটেম ২</li>
<li>লিস্ট আইটেম ৩</li>
</ol>
<button id="append-text">Append টেক্সট</button>
<button id="append-list">Append লিস্ট আইটেম</button>
</body>
</html>
ফলাফল
জেকুয়েরি prepend() মেথড
জেকুয়েরি prepend() মেথড নির্বাচিত এলিমেন্টের শুরুতে নতুন কন্টেন্ট যুক্ত করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#prepend-text").click(function(){
$("p").prepend("<b>prepend() মেথড দ্বারা যুক্ত টেক্সট!!</b>. ");
});
$("#prepend-list").click(function(){
$("ol").prepend("<li>prepend() মেথড দ্বারা যুক্ত লিস্ট আইটেম!!</li>");
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
<ol>
<li>লিস্ট আইটেম ১</li>
<li>লিস্ট আইটেম ২</li>
<li>লিস্ট আইটেম ৩</li>
</ol>
<button id="prepend-text">prepend টেক্সট</button>
<button id="prepend-list">prepend লিস্ট আইটেম</button>
</body>
</html>
ফলাফল
append() এবং prepend() মেথডের মাধ্যমে একাধিক নতুন এলিমেন্ট যুক্ত করা
উপরের উভয় উদাহরণে append() এবং prepend() মেথড এর একটি মাত্র প্যারামিটার সরবরাহ করে আমরা শুধুমাত্র নির্বাচিত এইচটিএমএল এলিমেন্টের শুরু/শেষে কিছু কন্টেন্ট(টেক্সট / এইচটিএমএল) যুক্ত করেছিলাম।
যাইহোক append() এবং prepend() উভয় মেথডই প্যারামিটার হিসেবে অসংখ্য নতুন এলিমেন্ট গ্রহণ করতে পারে। জেকুয়েরি অথবা জাভাস্ক্রিপ্ট কোড এবং DOM এলিমেন্টের মাধ্যমে আমরা টেক্সট/এইচটিএমএল বিশিষ্ট নতুন নতুন এলিমেন্ট উৎপন্ন করতে পারি। যেমনটা আমরা পূর্ববর্তী উদাহরণগুলোতে দেখিয়েছি।
নিচের উদাহরনে প্রথমে আমরা কয়েকটি নতুন এলিমেন্ট তৈরি করেছি এবং এই এলিমেন্টগুলো যথাক্রমে টেক্সট/এইচটিএমএল, জেকুয়েরি এবং জাভাস্ক্রিপ্টের সাহায্যে তৈরি করা হয়েছে। পরিশেষে আমরা নতুন এলিমেন্টগুলোকে append() মেথডের মাধ্যমে টেক্সট এর শেষে যুক্ত করে দিয়েছিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function appendText() {
var try1 = "<p>সাধারণ টেক্সট।</p>"; // এইচটিএমএলের সাহায্যে
var try2 = $("<p></p>").text("সাধারণ টেক্সট।"); // জেকুয়েরির সাহায্যে
var try3 = document.createElement("p");
try3.innerHTML = "সাধারণ টেক্সট।"; // DOM এর সাহায্যে
$("body").append(try1, try2, try3); //নতুন এলিমেন্ট যুক্তকরন
}
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button onclick="appendText()">Append টেক্সট</button>
</body>
</html>
ফলাফল
উপরের উদাহণটি prepend() মেথড এর ক্ষেত্রেও প্রযোজ্য। ফলাফল দেখার জন্য নিজেই যাচাই করুন।
জেকুয়েরি after() এবং before() মেথড
after()মেথড নির্বাচিত এলিমেন্টের পরে নতুন কন্টেন্ট যুক্ত করে।before()মেথড নির্বাচিত এলিমেন্টের আগে নতুন কন্টেন্ট যুক্ত করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#before-content").click(function(){
$("div").before("<b>before() মেথড দ্বারা যুক্ত কন্টেন্ট!!<br></b>");
});
$("#after-content").click(function(){
$("div").after("<b>after() মেথড দ্বারা যুক্ত কন্টেন্ট!!<br></b>");
});
});
</script>
</head>
<body>
<div style="background:green;color:white;padding:20px;">স্যাট একাডেমীতে স্বাগতম!!</div>
<br>
<button id="before-content">আগে কন্টেন্ট যুক্ত করুন</button>
<button id="after-content">পরে কন্টেন্ট যুক্ত করুন</button>
</body>
</html>
ফলাফল
after() এবং before() মেথডের মাধ্যমে একাধিক নতুন এলিমেন্ট যুক্ত করা
append() এবং prepend() মেথড এর মত after() এবং before() উভয় মেথডই প্যারামিটার হিসেবে অসংখ্য নতুন এলিমেন্ট গ্রহণ করতে পারে। জেকুয়েরি অথবা জাভাস্ক্রিপ্ট কোড এবং DOM এলিমেন্টের মাধ্যমে আমরা টেক্সট/এইচটিএমএল বিশিষ্ট নতুন নতুন এলিমেন্ট উৎপন্ন করতে পারি। যেমনটা আমরা পূর্ববর্তী উদাহরণগুলোতে দেখিয়েছি।
নিচের উদাহরনে প্রথমে আমরা কয়েকটি নতুন এলিমেন্ট তৈরি করেছি এবং এই এলিমেন্টগুলো যথাক্রমে টেক্সট/এইচটিএমএল, জেকুয়েরি এবং জাভাস্ক্রিপ্টের সাহায্যে তৈরি করা হয়েছে। পরিশেষে আমরা নতুন এলিমেন্টগুলোকে after() মেথডের মাধ্যমে টেক্সট এর পরে যুক্ত করে দিয়েছিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function afterText() {
var try1 = "<b>আমার </b>"; // এইচটিএমএলের সাহায্যে এলিমেন্ট তৈরি
var try2 = $("<b></b>").text("জেকুয়েরি! "); // জেকুয়েরির সাহায্যে তৈরি
var try3 = document.createElement("b"); // DOM এর সাহায্যে তৈরি
try3.innerHTML = "শিখতে ভালো লাগে! ";
$("img").after(try1, try2, try3); // img এলিমেন্টের পর নতুন এলিমেন্ট তৈরি
}
</script>
</head>
<body>
<img src="imges/satt.png" alt="logo" width="140" height="140">
<p>ইমেজের পর টেক্সট অন্তর্ভূক্ত করার জন্য নিচের বাটনে ক্লিক করুন।</p>
<br>
<button onclick="afterText()">পরে কন্টেন্ট যুক্ত করুন</button>
</body>
</html>
ফলাফল
উপরের উদাহণটি before() মেথড এর ক্ষেত্রেও প্রযোজ্য। ফলাফল দেখার জন্য নিজে যাচাই করুন।
জেকুয়েরি এইচটিএমএল রেফারেন্স
জেকুয়েরি এইচটিএমএল মেথডের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি এইচটিএমএল/সিএসএস রেফারেন্স পেজে ভিজিট করুন।