নতুন এলিমেন্ট যুক্ত করা



জেকুয়েরির মাধ্যমে ডকুমেন্টের যেকোনো জায়গায় খুব সহজে নতুন এইচটিএমএল এলিমেন্ট/কন্টেন্ট যুক্ত করা যায়।


নতুন এইচটিএমএল কন্টেন্ট যুক্ত করা

জেকুয়েরিতে আমরা চারভাবে নতুন কন্টেন্ট যুক্ত করতে পারি। যথা -
append() মেথড নির্বাচিত(Selected) এলিমেন্টের শেষে নতুন কন্টেন্ট যুক্ত করে।
prepend() মেথড নির্বাচিত এলিমেন্টের শুরুতে নতুন কন্টেন্ট যুক্ত করে।
after() মেথড নির্বাচিত এলিমেন্টের পরে নতুন কন্টেন্ট যুক্ত করে।
before() মেথড নির্বাচিত এলিমেন্টের আগে নতুন কন্টেন্ট যুক্ত করে।


append() মেথড

জেকুয়েরি append() মেথড নির্বাচিত(Selected) এলিমেন্টের শেষে নতুন কন্টেন্ট যুক্ত করে।

উদাহরণ দেখুন

<!DOCTYPE html>
<html>
<head>
<title> জেকুয়েরি append() মেথড এর উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ</p>
<p>এটি আরেকটি প্যারাগ্রাফ</p>
<ol>
<li>লিস্ট আইটেম ১</li>
<li>লিস্ট আইটেম ২</li>
<li>লিস্ট আইটেম ৩</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>



prepend() মেথড

জেকুয়েরি prepend() মেথড নির্বাচিত এলিমেন্টের শুরুতে নতুন কন্টেন্ট যুক্ত করে।

উদাহরণ দেখুন

<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি prepend() মেথড উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
<ol>
<li>লিস্ট আইটেম ১</li>
<li>লিস্ট আইটেম ২</li>
<li>লিস্ট আইটেম ৩</li>
</ol>
<button id="btn1">প্রিপেন্ড টেক্সট</button>
<button id="btn2">প্রিপেন্ড লিস্ট আইটেম</button>
</body>
</html>



append() এবং prepend() ব্যবহার করে একাধিক নতুন এলিমেন্ট যুক্ত করা

উপরের ২টি উদাহরণে append() এবং prepend() মেথড এর একটি মাত্র প্যারামিটার সরবরাহ করে আমরা নির্বাচিত এইচটিএমএল এলিমেন্টের শুরু/শেষে শুধুমাত্র কিছু কন্টেন্ট(টেক্সট/এইচটিএমএল) যুক্ত করেছিলাম।
এই append() এবং prepend() উভয় মেথডই প্যারামিটার হিসেবে অসংখ্য নতুন এলিমেন্ট গহন করতে পারে। জেকুয়েরি অথবা জাভাস্ক্রিপ্ট কোড এবং DOM এলিমেন্টের মাধ্যমে আমরা টেক্সট/এইচটিএমএল বিশিষ্ট নতুন নতুন এলিমেন্ট উৎপন্ন করতে পারি। যেমনটা আমরা পূর্ববর্তী উদাহরণগুলোতে দেখেছি।

নিচের উদাহরনে প্রথমে আমরা কয়েকটি নতুন এলিমেন্ট তৈরি করেছি এবং এই এলিমেন্টগুলো যথাক্রমে টেক্সট/এইচটিএমএল, জেকুয়েরি এবং জাভাস্ক্রিপ্টের সাহায্যে তৈরি করা হয়েছে। পরিশেষে আমরা নতুন এলিমেন্টগুলোকে append() মেথডের মাধ্যমে টেক্সট এর শেষে যুক্ত করে দিয়েছি।

উদাহরণ দেখুন

<!DOCTYPE html>
<html>
<head>
<title> অধিক প্যারামিটারসহ append() মেথড এর উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function appendText() {
var try1 = "

Text.

"; // এইচটিএমএলের সাহায্যে
var try2 = $("

").text("Text."); // জেকুয়েরির সাহায্যে
var try2 = document.createElement("p");
try2.innerHTML = "Text."; // DOM এর সাহায্যে
$("body").append(try1, try2, try2); //নতুন এলিমেন্ট যুক্তকরন
}
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।


<button onclick="appendText()">Append text</button>
</body>
</html>

নোট - উপরের উদাহণটি prepend() মেথড এর ক্ষেত্রেও প্রযোজ্য।


after() এবং before() মেথড

after() মেথড নির্বাচিত এলিমেন্টের পরে নতুন কন্টেন্ট যুক্ত করে।
before() মেথড নির্বাচিত এলিমেন্টের আগে নতুন কন্টেন্ট যুক্ত করে।

উদাহরণ দেখুন

<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="../jquery_example/satt.png" alt="jQueryImage" width="100" height="140">
<button id="btn1">আগে প্রবেশ করান</button>
<button id="btn2">পরে প্রবেশ করান</button>
</body>
</html>



after() এবং before() এর মাধ্যমে একাধিক নতুন এলিমেন্ট যুক্ত করা

append() এবং prepend() মেথড এর মত after() এবং before() উভয় মেথডই প্যারামিটার হিসেবে অসংখ্য নতুন এলিমেন্ট গ্রহণ করতে পারে। জেকুয়েরি অথবা জাভাস্ক্রিপ্ট কোড এবং DOM এলিমেন্টের মাধ্যমে আমরা টেক্সট/এইচটিএমএল বিশিষ্ট নতুন নতুন এলিমেন্ট উৎপন্ন করতে পারি। যেমনটা আমরা পূর্ববর্তী উদাহরণগুলোতে দেখেছি।
নিচের উদাহরনে প্রথমে আমরা কয়েকটি নতুন এলিমেন্ট তৈরি করেছি এবং এই এলিমেন্টগুলো যথাক্রমে টেক্সট/এইচটিএমএল, জেকুয়েরি এবং জাভাস্ক্রিপ্টের সাহায্যে তৈরি করা হয়েছে। পরিশেষে আমরা নতুন এলিমেন্টগুলোকে after() মেথডের মাধ্যমে টেক্সট এর পরে যুক্ত করে দিয়েছি।

উদাহরণ দেখুন

<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function afterText() {
var try1 = "<b>আমার</b>"; // এইচটিএমএলের সাহায্যে এলিমেন্ট তৈরি
var try2 = $("<i></i>").text("জেকুয়েরি! "); // জেকুয়েরির সাহায্যে তৈরি
var try2 = document.createElement("b"); // DOM এর সাহায্যে তৈরি
try2.innerHTML = "শিখতে অনেক ভালো লাগে!";
$("img").after(try1, try2, try2); // img এলিমেন্টের পর নতুন এলিমেন্ট তৈরি
}
</script>
</head>
<body>
<img src="../jquery_example/satt.png" alt="logo" width="140" height="140">
<p>ইমেজের পর টেক্সট অন্তর্ভূক্ত করার জন্য ক্লিক করুন</p>
<button onclick="afterText()">শেষে অন্তর্ভূক্ত করুন</button>
</body>
</html>

নোট - উপরের উদাহণটি prepend() মেথড এর ক্ষেত্রেও প্রযোজ্য।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.