Category Archives: JavaScript

জেকোয়েরির মাধ‍্যমে DOM নোডের মধ‍্যকার কনটেন্ট দেখানো

Posted on by | Leave a reply

কোনো নোডের মধ‍্যকার কনটেন্ট বদলাতে চাইলে জেকোয়েরিতে আপনি দুটি মেথড ব‍্যবহার করতে পারেন: text() ও html() । text() মেথডের মাধ‍্যমে কেবল টেক্সট যোগ করতে পারবেন কোনো মার্কআপ ছাড়া, আর html() এর মাধ‍্যমে তাতে মার্কআপ যোগ করতে পারবেন। নিচের উদাহরণটি লক্ষ‍্য করুন:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Shohojpath</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#cont1").text("This is some text inserted by <code>text()</code> method.");
            $("#cont2").html("This text is inserted by <strong>jQuery</strong> using <code>html()</code> method.");
        });
    </script>

</head>

<body>
    <h1>Inserting text in nodes</h1>
    <p id="cont1"></p>
    <p id="cont2"></p>

</body>
</html>

এখানে প্রথমে text() মেথড ব‍্যবহার করে কিছু টেক্সট যোগ করতে বলা হয়েছে যার মধ‍্যে একটি মার্কআপ <code>text()</code> রয়েছে। এরপর html() মেথড ব‍্যবহার করে সেখানেও কিছু HTML যোগ করতে বলা হয়েছে। তার মধ‍্যে strong ও code উপাদান ব‍্যবহার করা হয়েছে। এখন এই ডকুমেন্টটি যদি ওয়েব ব্রাউজারে দেখেন তাহলে নিচের চিত্রের মতো দেখতে পাবেন।

Slecting Contents of a DOM node

লক্ষ‍্য করুন, text() মেথডের মাধ‍্যমে আমরা যে টেক্সট যোগ করেছি তাতে HTML মার্কআপ থাকলেও তা মার্কআপ হিসেবে দেখাচ্ছে না, দেখাচ্ছে টেক্সট হিসেবে। এর পরেই html() মেথড ব‍্যবহার করে মার্কআপসহ যে টেক্সট যোগ করা হচ্ছে তাতে মার্কআপ ঠিকমতোই দেখাচ্ছে। তাই কোনো টেক্সটের মধ‍্যে মার্কআপ থাকলে এবং সেই মার্কআপ কার্যকরভাবে দেখাতে চাইলে টেক্সট যোগ করার সময় html() মেথড ব‍্যবহার করতে হবে।