এই টিউটোরিয়ালটি জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীলভাবে HTML কোড লেখার পদ্ধতি বর্ণনা করবে।
কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীলভাবে HTML কোড লিখবেন?
জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল কোড লিখতে, নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করুন:
পদ্ধতি 1: document.createElement() পদ্ধতি ব্যবহার করে গতিশীলভাবে HTML কোড লিখুন
জাভাস্ক্রিপ্ট এর ' document.createElement() 'সহ পদ্ধতি' পাঠ্য বিষয়বস্তু ” প্রপার্টি জাভাস্ক্রিপ্টে গতিশীলভাবে একটি HTML কোড লিখতে ব্যবহৃত হয়। createElement() পদ্ধতি ব্যবহার করে, আপনি একটি নির্দিষ্ট HTML উপাদান তৈরি করতে পারেন এবং পাঠ্য বিষয়বস্তু সেট করতে textContent প্রপার্টি ব্যবহার করা হয়।
বাক্য গঠন
জাভাস্ক্রিপ্টে একটি HTML উপাদান তৈরি করতে প্রদত্ত সিনট্যাক্স ব্যবহার করুন:
নথি এলিমেন্ট তৈরি করুন ( 'নাম যোগ করা' )
উদাহরণ
এখানে, প্রথমে, আমরা HTML
ট্যাগ ব্যবহার করে একটি জাভাস্ক্রিপ্ট ফাইলে একটি অনুচ্ছেদ তৈরি করব ক্রিয়েট এলিমেন্ট() 'পদ্ধতি:
const পাঠ্য = নথি এলিমেন্ট তৈরি করুন ( 'পি' ) ;একটি অনুচ্ছেদে পাঠ্য সেট করতে textContent বৈশিষ্ট্য ব্যবহার করুন:
পাঠ্য পাঠ্য বিষয়বস্তু = 'লিনাক্সহিন্টে স্বাগতম' ;
অবশেষে, ওয়েবপেজে লেখাটি প্রিন্ট করুন ' document.write() 'পদ্ধতি:
নথি লিখুন ( পাঠ্য পাঠ্য বিষয়বস্তু ) ;এখানে, আপনি আউটপুটে দেখতে পাচ্ছেন যে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েব পৃষ্ঠায় লেখাটি সফলভাবে লিখছি:
পদ্ধতি 2: অভ্যন্তরীণ এইচটিএমএল প্রপার্টি ব্যবহার করে ডায়নামিকভাবে HTML কোড লিখুন
গতিশীলভাবে HTML কোড লিখতে, JavaScript ব্যবহার করুন “ innerHTML 'সম্পত্তি। এটি একটি HTML উপাদানের বিষয়বস্তু পরিবর্তন করার সবচেয়ে সহজ পদ্ধতি। এটা সব ব্রাউজার সমর্থন করে.
বাক্য গঠন
innerHTML বৈশিষ্ট্য ব্যবহার করতে প্রদত্ত সিনট্যাক্স অনুসরণ করুন:
innerHTML = 'পাঠ্য'উদাহরণ
এইচটিএমএল ফাইলে, প্রথমে একটি বোতাম তৈরি করুন যা সংজ্ঞায়িত ফাংশনটিকে কল করবে ' শিরোনাম() ক্লিক ইভেন্টে জাভাস্ক্রিপ্টে:
< বোতামে ক্লিক করুন = 'শিরোনাম()' > এখানে ক্লিক করুন বোতাম >
ট্যাগ ব্যবহার করে একটি অনুচ্ছেদ তৈরি করুন যেখানে জাভাস্ক্রিপ্ট থেকে পাঠ্য দেখানো হবে এবং এটিতে একটি আইডি বরাদ্দ করুন:
< পি আইডি = 'শিরোনাম' >> পি >একটি ফাংশন সংজ্ঞায়িত করুন ' শিরোনাম() একটি জাভাস্ক্রিপ্ট ফাইলে। এইচটিএমএল এলিমেন্টের রেফারেন্স পান তার নির্ধারিত আইডি ব্যবহার করে ' getElementById() 'পদ্ধতি এবং একটি প্রয়োগ করুন' innerHTML 'এর উপর সম্পত্তি:
ফাংশন শিরোনাম ( ) {নথি getElementById ( 'শিরোনাম' ) . innerHTML = '
লিনাক্সহিন্টে স্বাগতম
' ;}
আউটপুট
আমরা জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীলভাবে HTML কোড লেখার সাথে সম্পর্কিত সমস্ত প্রয়োজনীয় তথ্য সংকলন করেছি।
উপসংহার
জাভাস্ক্রিপ্টে গতিশীলভাবে এইচটিএমএল কোড লিখতে, ' document.createElement() 'সহ পদ্ধতি' পাঠ্য বিষয়বস্তু 'সম্পত্তি বা ' innerHTML 'সম্পত্তি। প্রথম পদ্ধতিতে, আপনার কোনো HTML কোডের প্রয়োজন নেই, অভ্যন্তরীণ এইচটিএমএল প্রপার্টিতে থাকাকালীন, আপনাকে এইচটিএমএল উপাদান অ্যাক্সেস করতে হবে এবং এটিতে একটি অপারেশন করতে হবে। এই টিউটোরিয়ালে, আমরা গতিশীলভাবে JavaScript ব্যবহার করে HTML কোড লেখার পদ্ধতি বর্ণনা করেছি।