কিভাবে JavaScript appendChild ব্যবহার করবেন

কিছু তালিকায় পাঠ্য থাকে; অন্যান্য তালিকায় ছবি রয়েছে; অন্যান্য তালিকায় কাস্টম ওয়েব উপাদান রয়েছে। একটি তালিকায় যাই হোক না কেন, একটি জিনিস নিশ্চিত:ওয়েব পৃষ্ঠাগুলি তালিকায় পূর্ণ৷

আপনি যখন একটি তালিকা তৈরি করছেন, আপনি সাধারণত HTML ব্যবহার করে এর মানগুলি হার্ডকোড করবেন। JavaScript appendChild নামে একটি পদ্ধতি ব্যবহার করে এই প্রক্রিয়াটিকে ত্বরান্বিত করা যেতে পারে . এই পদ্ধতিটি আপনাকে একটি তালিকার শেষে একটি আইটেম বা অন্য একটি ওয়েব উপাদান, যেমন একটি ব্লককোট যোগ করতে দেয়৷

এই নির্দেশিকায়, আমরা অ্যাপেন্ডচাইল্ড কি নিয়ে কথা বলতে যাচ্ছি () জাভাস্ক্রিপ্টে আছে এবং এটি কিভাবে কাজ করে। আপনাকে শুরু করতে সাহায্য করার জন্য আমরা একটি উদাহরণ দিয়ে হেঁটে যাব। শুরু করা যাক!

JavaScript appendChild কি?

appendChild() একটি প্যারেন্ট নোডের শেষে একটি নোড যোগ করে। appendChild() সাধারণত HTML তালিকায় আইটেম যোগ করতে ব্যবহৃত হয়। একটি নোড HTML ডকুমেন্ট অবজেক্ট মডেল (DOM) এর যেকোনো আইটেমকে বোঝায়।

appendChild-এর সিনট্যাক্স () এই রকম:

parent.appendChild(শিশু);

"পিতামাতা" সেই উপাদানটিকে বোঝায় যেখানে আপনি একটি শিশুকে যুক্ত করতে চান৷ "শিশু" হল সেই উপাদান যা আপনি পিতামাতার নীচে যুক্ত করতে চান৷

একটি উপাদান পুনরুদ্ধার করতে আপনাকে JavaScript getElementById() বা অন্য একটি "গেটার" এর মতো একটি পদ্ধতি ব্যবহার করতে হবে। অথবা, আপনি জাভাস্ক্রিপ্টে একটি এইচটিএমএল উপাদান তৈরি করতে পারেন এবং তারপরে সেই উপাদানটিকে "অভিভাবক" অবজেক্ট হিসাবে appendChild() দিয়ে ব্যবহার করতে পারেন।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

উদাহরণস্বরূপ, স্কোন রেসিপিগুলির একটি তালিকায় নোডগুলির একটি তালিকা থাকবে। এই নোডগুলি সম্ভবত

একজন অভিভাবক

যেটিতে আছে ট্যাগগুলিতে চাইল্ড থাকবে নোড appendChild() এর একটি সাধারণ ব্যবহার হল

-এর মতো একটি তালিকায় ট্যাগ করে অথবা
.

appendChild() JavaScript:উদাহরণ

চলুন একটি অ্যাপ্লিকেশন তৈরি করি যা appendChild ব্যবহার করে . আমরা একটি সাইট তৈরি করতে যাচ্ছি যা দশম শ্রেণির শিক্ষার্থীদের নামের তালিকা লোড করে। আমরা এটিকে তিনটি ধাপে ভাগ করব:

• একটি ফ্রন্ট এন্ড সেট আপ করা হচ্ছে
• উপাদান নির্বাচন এবং তৈরি করা
• অ্যাপেন্ডচাইল্ড ব্যবহার করে

একটি ফ্রন্ট এন্ড সেট আপ করা হচ্ছে

প্রথমত, আমরা একটি প্রাথমিক ফ্রন্ট এন্ড সেট আপ করব যা আমাদের ছাত্রদের নামের তালিকা দেখায়। index.html নামে একটি ফাইল খুলুন এবং এই কোডটি পেস্ট করুন:

      
 দশম শ্রেণীর ক্লাস রোস্টার
 
 
  

আমরা একটি মৌলিক HTML নথি তৈরি করেছি। এই নথিতে একটি শিরোনাম এবং একটি তালিকা রয়েছে যাতে কোনো চাইল্ড আইটেম নেই৷ তালিকাটি

দিয়ে উপস্থাপন করা হয়েছে ট্যাগ।

এর পরে, আমাদের ওয়েব পৃষ্ঠার নান্দনিকতা উন্নত করতে styles.css নামে একটি ফাইলে আমাদের পৃষ্ঠায় কয়েকটি শৈলী যুক্ত করা যাক:

বডি { ব্যাকগ্রাউন্ড-রং:#f7f7f7; মার্জিন:স্বয়ংক্রিয়; প্রস্থ:50%; }

এই CSS নিয়মটি আমাদের পৃষ্ঠার জন্য একটি হালকা ধূসর পটভূমির রঙ সেট করবে। আমরা CSS ব্যাকগ্রাউন্ড-কালার প্রপার্টি ব্যবহার করে এটি করি। এটি -এর বিষয়বস্তুগুলিকেও স্থানান্তরিত করবে৷ পৃষ্ঠার কেন্দ্রে ট্যাগ করুন। আমরা কিভাবে লেআউট গঠন করেছি সে সম্পর্কে আরও জানতে, আমাদের CSS বক্স মডেল গাইড দেখুন।

আমাদের পেজ এখনও কার্যকরী নয়. আমরা তালিকার কোনো উপাদান যোগ করিনি। আপনি যখন ব্রাউজারে এটি খুলবেন তখন আমাদের পৃষ্ঠাটি কেমন দেখায় তা এখানে:



স্পষ্টতই এখনও কাজ বাকি আছে। আমাদের ওয়েব পেজে জাভাস্ক্রিপ্ট যোগ করা যাক।

উপাদান নির্বাচন এবং তৈরি করা

আমরা আমাদের তালিকায় আইটেম যোগ করা শুরু করার আগে, আমরা যে উপাদানগুলির সাথে কাজ করতে যাচ্ছি তা নির্বাচন করতে হবে। scripts.js নামে একটি ফাইল খুলুন এবং এই কোডটি যোগ করুন:

const students =document.querySelector("ul");

কোডের এই লাইনটি

ট্যাগ সহ আমাদের পৃষ্ঠায় আইটেমটি নির্বাচন করবে . এই আমাদের তালিকা প্রতিনিধিত্ব করে. এর পরে, আমরা আমাদের তালিকায় যোগ করার জন্য একটি উপাদান তৈরি করতে যাচ্ছি:

 let li =document.createElement("li");li.textContent ="স্টিভেন";

এই কোডটি

• সহ একটি পাঠ্য নোড তৈরি করে ট্যাগ যা "স্টিভেন" শব্দটি ধারণ করে। এখন যা করা বাকি আছে তা হল আমাদের তালিকায় আমাদের নতুন তৈরি উপাদান যোগ করা।

  অ্যাপেন্ডচাইল্ড() জাভাস্ক্রিপ্ট পদ্ধতি ব্যবহার করা

  অ্যাপেন্ড চাইল্ড () আমাদের একটি নোডে উপাদান যোগ করার অনুমতি দেয়। আপনার scripts.js ফাইলের নীচে নিম্নলিখিত কোড যোগ করুন:

  students.appendChild(li);

  এটি আমাদের তালিকায় আগে তৈরি করা তালিকা আইটেম যোগ করবে। আসুন আমাদের ওয়েব পেজ খুলুন এবং ফলাফল দেখুন:
  

  

  আমাদের তালিকা এখন একটি আইটেম আছে. আমাদের তালিকায় আইটেম যোগ করে এমন একটি ফাংশন তৈরি করে আমরা আমাদের কোডকে আরও দক্ষ করে তুলতে পারি। এটি আমাদের createElement পুনরাবৃত্তি না করেই একাধিক আইটেম যোগ করার অনুমতি দেবে আগের থেকে কোড।

  createElement পরিবর্তন করুন এবং টেক্সট কন্টেন্ট এর কোডের লাইন:

  ফাংশন createStudent(name) { let li =document.createElement("li");li.textContent =name;return li;}

  এই ফাংশনটি একটি নতুন

• তৈরি করবে উপাদান যখনই এটি বলা হয়। তারপর, appendChild পরিবর্তন করুন () এই ফাংশনটি ব্যবহার করার জন্য বিবৃতি:

  students.appendChild(createStudent("Mark"));students.appendChild(createStudent("Chloe"));students.appendChild(createStudent("Louise"));

  এটি তিনটি ছাত্র তৈরি করবে:মার্ক, ক্লো এবং লুইস। আসুন আমাদের index.html ফাইলটি আবার খুলুন এবং দেখুন আমাদের পরিবর্তনগুলি করা হয়েছে কিনা:

  

  আমাদের ক্লাস রোস্টারে এখন তিনটি নাম রয়েছে৷

  একটি ভিন্ন তালিকায় আইটেমগুলি সরান

  আপনি appendChild ব্যবহার করে আইটেমগুলিকে একটি ভিন্ন তালিকায় স্থানান্তর করতে পারেন৷ () পদ্ধতি। আসুন উপরে থেকে আমাদের উদাহরণ সংশোধন করে এটি দেখাই। প্রথমে, আসুন আমাদের HTML পৃষ্ঠা পরিবর্তন করি যাতে আমাদের দুটি তালিকা থাকে:

  …  
  দশম শ্রেণির ক্লাস রোস্টার
   
  শনি পরীক্ষা
   
   
   
  শনি পরীক্ষা হয়নি
   
   
   ...

  আমরা দুটি তালিকা তৈরি করেছি:স্যাট টেস্ট এবং স্যাট টেস্ট নেই। এখন, আমাদের দুটি তালিকা নির্বাচন করতে এবং তিনজন ছাত্র তৈরি করতে আমাদের JavaScript ফাইল আপডেট করি:

  const sat_test =document.getElementById("sat_test");const has_not_sat_test =document.getElementById("has_not_sat_test");ফাংশন createStudent(name) { let li =document.createElement("লিন্টের নাম");;return li;}has_not_sat_test.appendChild(createStudent("Mark"));has_not_sat_test.appendChild(createStudent("Chloe"));has_not_sat_test.appendChild(createStudent(")>
   আমরা আমাদের দুটি তালিকা নির্বাচন করতে getElementById পদ্ধতি ব্যবহার করি।
   
  
   এই কোডটি মার্ক, ক্লো এবং লুসিকে "পরীক্ষায় বসেনি" তালিকায় যোগ করে। লুইস সবেমাত্র তার পরীক্ষায় বসেছে, এবং তাই তাকে অন্য তালিকায় স্থানান্তরিত করা যেতে পারে। আমরা appendChild ব্যবহার করে তার নাম সরাতে পারি () পদ্ধতি এবং lastChild নামে আরেকটি পদ্ধতি :
   
  var louise =has_not_sat_test.lastChild;sat_test.appendChild(louise);
   
  
   এই কোডটি আমাদের "পরীক্ষায় বসেনি" তালিকার শেষ DOM উপাদানটি নির্বাচন করে৷ এই আইটেমটি লাস্ট চাইল্ড পদ্ধতি ব্যবহার করে পুনরুদ্ধার করা হয়েছে। এরপর, আমরা এই আইটেমটিকে আমাদের "স্যাট টেস্ট" তালিকায় যুক্ত করেছি।
   
  
   আসুন আমাদের HTML ফাইল খুলি:
    
  
   আমাদের দুটি তালিকা রয়েছে:স্যাট পরীক্ষা এবং পরীক্ষা করা হয়নি। প্রাথমিকভাবে, আমরা সমস্ত ছাত্রের নাম "পরীক্ষায় বসেনি" তালিকায় স্থানান্তরিত করি। তারপর, আমরা appendChild ব্যবহার করি () লুইসের নাম "স্যাট টেস্ট" তালিকায় স্থানান্তর করতে।
   
  উপসংহার
   
  
   অ্যাপেন্ড চাইল্ড একটি উপাদানের শেষে একটি নোড তৈরি করতে () পদ্ধতি ব্যবহার করা হয়। আপনি appendChild() ব্যবহার করতে পারেন উপাদানের একটি তালিকায় কোনো উপাদান যোগ করতে। উদাহরণস্বরূপ, আপনি একটি <বিভাগ> ট্যাগে একটি 
   উপাদান যোগ করতে পারেন।
   
  
   একটি চ্যালেঞ্জ হিসাবে, আপনি appendChild ব্যবহার করতে পারেন কিনা তা দেখার চেষ্টা করুন () জাভাস্ক্রিপ্ট পদ্ধতি ইমেজ একটি গ্রিড তৈরি করতে. যখন একটি পৃষ্ঠা লোড হয়, তখন এটি appendChild ব্যবহার করে চারটি ছবির একটি তালিকা রেন্ডার করবে ()।
   
  
   শীর্ষ জাভাস্ক্রিপ্ট অনলাইন কোর্স এবং শেখার সংস্থান সম্পর্কে নির্দেশনার জন্য, আমাদের জাভাস্ক্রিপ্ট গাইড কীভাবে শিখবেন তা দেখুন।