jQuery html() মেথড কীভাবে ব্যবহার করবেন

jQuery-র অনেক মেথড আছে যা ডেভেলপারদের দক্ষতার সাথে একটি ডাইনামিক ওয়েব এক্সপেরিয়েন্স তৈরি করতে সাহায্য করে। jQuery html() মেথড সিলেক্ট করা এলিমেন্টের ভেতরের সকল HTML রিপ্লেস করে। এটি উপকারী যদি আপনি পেজের সাথে ইন্টারঅ্যাক্ট করার পর ইউজার কী দেখছে সেটি ডাইনামিক্যালি পরিবর্তন করতে চান।

এই গাইডে আমরা শিখব html() কীভাবে ব্যবহার করতে হয় এবং এর সিনট্যাক্স। আমরা html() ব্যবহার করার একটি স্টেপ-বাই-স্টেপ আপ্প্রোচও দেখব। jQuery html() jQuery লাইব্রেরিতে একটি ফান্ডামেন্টাল মেথড এবং প্রায়শই ব্যবহার হয়। বেসিক শিখলে, আপনি html() প্র্যাক্টিস করার জন্য রেডি হবেন।

jQuery html() কী?

jQuery html() একটি সেট ম্যাচ করা এলিমেন্টের প্রতিটি এলিমেন্টের HTML কন্টেন্ট সেট করে। শুধু কন্টেন্ট ডিজায়ারড HTML রিপ্লেস করার জন্য পর্যাপ্ত স্পেসিফিক কোয়েরি দেয়া উচিত।

শুধু কন্টেন্ট পরিবর্তন হয় html()-এর সাথে। যদি একটি স্টাইলশীট থাকে, তবে নতুন কন্টেন্ট পূর্বের কন্টেন্টের মতো একইভাবে স্টাইল হবে। এটাও মেনশন করার লायक যে html() শুধু HTML ডকুমেন্টে কাজ করে - এটি XML-এর সাথে কাজ করে না।

html() jQuery সিনট্যাক্স

মনে রাখবেন যে jQuery মেথডগুলো প্রথমে একটি সিলেক্টরে কল করা হয়। সিলেক্টর হতে পারে ব্রড একটি <p> ট্যাগ বা স্পেসিফিক একটি <div> আইডি সহ (<div id='main-app'></div>)। একবার ডিজায়ারড এলিমেন্ট সিলেক্ট হলে, আমরা html() কল করতে পারি এবং একটি HTML স্ট্রিং পাস করতে পারি প্যারামিটার হিসেবে html()-এ। CSS সিলেক্টরেরเกরোথোরো এক্সপ্লানেশনের জন্য, আমাদের গাইড রেফার করুন।

html() অথবা একটি স্ট্রিং লিটারেল প্যারামিটার হিসেবে গ্রহণ করে অথবা স্ট্রিং ধারণকারী একটি ভেরিয়েবল। "New Content" স্ট্রিং লিটারেল পাস করলে সেম রেন্ডার হবে "New Content" রেফারেন্স করা একটি ভেরিয়েবল পাস করলে।

ধরি আমাদের এই সিম্পল <div> আছে:

<div class='main-content> <p class='paragraphOne'> Hello World </p> </div>

আমরা পুরো <p> ট্যাগ রিপ্লেস করতে পারি:

$('div.main-content').html('<p>New Content</p>')

উপরের কোড নতুন HTML রেন্ডার করে:

<div class='main-content> <p>New Content </p> </div>

হ্যাদ থাকা オリジナル <p> ট্যাগের সাথে স্টাইলিং, সেটি নতুন কন্টেন্টের সাথে আর এক্টিভ থাকবে না। একটি সিম্পল স্ট্রিংও পাস করা সম্ভব:

$('div.main-content').html('New Content')

আমাদের HTML এখন এইরকম:

<div class='main-content> New Content </div>

আমরা দেখতে পাচ্ছি নতুন কন্টেন্টে কিছু পার্থক্য আছে। একটি স্ট্রিং লিটারেল পাস করা পূর্বের কন্টেন্টের স্টাইলিং মেইনটেইন করার একটি দুর্দান্ত উপায়। মনে রাখবেন, একটি স্ট্রিং লিটারেল শুধু একটি স্ট্রিং যেটি ক্যারেক্টার ধারণ করে। যদি নতুন কন্টেন্ট একটি চাইল্ড এলিমেন্ট হতে হয়, তবে HTML স্ট্রিং ব্যবহার করলে এটি সম্পন্ন হয়।

এখন বেসিক সিনট্যাক্স কভার হয়েছে, চলুন একটি উদাহরণ দেখি।

html() jQuery উদাহরণ

আমরা দেখেছি html() কীভাবে সিলেক্ট করা এলিমেন্টের ভেতরের কন্টেন্ট রিপ্লেস করে আমাদের উপরের "New Content" উদাহরণে। এটি একটি স্ট্রিং লিটারেল বা একটি HTML স্ট্রিং পাস করে প্যারামিটার হিসেবে সম্পন্ন করা যায়। চলুন একটি উদাহরণ দেখি যেখানে আমরা ওরিজিনাল স্টাইলিং মেইনটেইন করি।

<head> <style> .blue { color: blue; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <h2> html() Demo: </h2> <div class='main'> <p class='blue'> Hello </p> <p> World </p> <p> Goodbye </p> </div> <script> </script> </body>

আমাদের শুরুতেই HTML পেজটি দেখলে, আমরা দেখব শুধু "Hello" শব্দটি ব্লু কালারের সাথে স্টাইল্ড।

এই উদাহরণে, আমরা "Hello" শব্দটি নতুন কন্টেন্ট দিয়ে রিপ্লেস করতে চাই, কিন্তু ওরিজিনাল স্টাইলিং রিটেইন করতে চাই। এজন্য, আমরা blue ক্লাস নাম वाले প্যারাগ্রাফ সিলেক্ট করি।

 $('p.blue').html("Hello AGAIN")

আমরা blue ক্লাসের প্যারাগ্রাফ সিলেক্ট করেছি এবং "Hello"-কে "Hello AGAIN"-এ রিপ্লেস করেছি। যেহেতু html() এলিমেন্ট নামগুলোতে র‍্যাপ করা কন্টেন্ট রিপ্লেস করে, ব্লু কালার থাকবে।

কী হয় যদি আমরা সব প্যারাগ্রাফ টেক্সট রিপ্লেস করতে চাই? যদি আমরা <p> এলিমেন্ট সিলেক্ট করি, তবে এটি উপরের টেক্সটকে "Hello AGAIN"-এর তিন ইনস্ট্যান্স দিয়ে রিপ্লেস করবে।

 $('p').html("Hello AGAIN")

এখানে আমরা HTML ফাইলের সকল প্যারাগ্রাফ ট্যাগ সিলেক্ট করছি এবং প্রতিটির কন্টেন্ট "Hello AGAIN"-এ রিপ্লেস করছি। আমাদের প্রথম উদাহরণের মতো, ওরিজিনাল স্টাইলিং রেন্ডার হবে কারণ আমরা সেই ট্যাগগুলোর ভেতরে র‍্যাপ করা কন্টেন্ট রিপ্লেস করছি।

ঠিক যা আশা করছিলাম। চলুন আমাদের সিলেক্টরে এক লেভেল আপ যাই 'main' ক্লাস वाले আমাদের <div>-এ। এটি হলো যেখানে HTML স্ট্রিং পাস করা প্যারামিটার হিসেবে কাজে আসে।

 $('div.main').html('<p class=blue>Main Div Content</p>')

আমাদের main div-এ, আমাদের তিনটি প্যারাগ্রাফ এলিমেন্ট আছে। html() কীভাবে কাজ করে তা জানায়, আমরা অনুমান করতে পারি উপরের কোড তিনটি <p> ট্যাগকে প্যারামিটার হিসেবে পাস করা একটিতে রিপ্লেস করবে। HTML সম্পর্কে গভীরে জানতে আমাদের লার্ন HTML গাইড পড়ুন।

এক লাইন কোডে, আমরা তিনটি ভিন্ন প্যারাগ্রাফ এলিমেন্ট রিপ্লেস করেছি এবং আমাদের ওরিজিনাল ক্লাস স্টাইলিং ব্যবহার করেছি।

উপসংহার

jQuery html() HTML পেজে কন্টেন্ট রিপ্লেস করার জন্য একটি কমনলি ইউজড মেথড একটি ডাইনামিক এক্সপেরিয়েন্স তৈরি করতে। কারণ html() HTML এলিমেন্টগুলোর ভেতরে র‍্যাপ করা কন্টেন্ট রিপ্লেস করে, jQuery সিলেক্টরগুলো এবং যেকোনো স্টাইল ক্লাসে মনোযোগ দেওয়া গুরুত্বপূর্ণ। এটি কোনো আনচাহ==, style changes প্রিভেন্ট করবে।

আমরা শিখেছি jQuery html() কী, এর সিনট্যাক্স, এবং কীভাবে এটি ব্যবহার করা যায় এর একটি উদাহরণ। কিছু সময় দিন প্র্যাকটিস করতে এবং এই ವೈডলি ইউজড মেথডকে জানতে।