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

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


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


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

append() মেথডের মাধ্যমে নির্বাচিত এলিমেন্টের শেষে কন্টেন্ট অন্তর্ভূক্ত করা হয়।

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


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

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

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

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

প্যারামিটার বিবরণ
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").append(" <b>নতুন যুক্ত হওয়া টেক্সট</b>");
    });
    $("#test2").click(function(){
        $("ol").append("<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>

ফলাফল




উদাহরণ

append() - এইচটিএমএল, জেকুয়েরি এবং ডোম এর সাথে কন্টেন্ট তৈরি।

append() মেথডের মাধ্যমে কন্টেন্ট অন্তুর্ভূক্তকরন।

উদাহরণ

<!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 appendText() {
    var txt1 = "<p>টেক্সট</p>";              
    var txt2 = $("<p></p>").text("টেক্সট");  
    var txt3 = document.createElement("p");
    txt3.innerHTML = "টেক্সট";              
    $("body").append(txt1, txt2, txt3); 
}
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<button onclick="appendText()">Append টেক্সট</button>

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

<h1>এটি একটি হেডিং</h1>

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

<button>প্রতিটি p এলিমেন্ট শেষে কন্টেন্ট অন্তর্ভুক্ত করুন </button>

</body>
</html>

ফলাফল




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