append পদ্ধতি

append পদ্ধতি একটি উপাদানের শেষে অন্য একটি উপাদান সন্নিবেশ করতে দেয়। প্যারামিটার হিসেবে পদ্ধতিটি একটি উপাদান গ্রহণ করে, যা সাধারণত createElement এর মাধ্যমে তৈরি, অথবা একটি স্ট্রিং। একসাথে বেশ কয়েকটি উপাদান বা স্ট্রিং যোগ করা সম্ভব, কমা দ্বারা সেগুলো আলাদা করে।

সিনট্যাক্স

javascriptparent.append(element or string);

উদাহরণ

আসুন একটি প্যারাগ্রাফ তৈরি করি, এটিতে টেক্সট সেট করি এবং পৃষ্ঠায় #parent ব্লকের শেষে রাখি:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.append(p);

কোড 실행ের ফলাফল:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>!</p>
</div>

উদাহরণ

আসুন একসাথে বেশ কয়েকটি প্যারাগ্রাফ #parent ব্লকের শেষে রাখি:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.append(p1, p2);

কোড 실행ের ফলাফল:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>a</p>
  <p>b</p>
</div>

উদাহরণ

আসুন পদ্ধতির প্যারামিটার হিসেবে একটি স্ট্রিং ব্যবহার করি:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
parent.append('!');

কোড 실행ের ফলাফল:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  !
</div>

উদাহরণ

একটি ul দেওয়া আছে। আসুন এতে 9টি li ট্যাগ রাখি, এবং তাদের টেক্সট হিসেবে ক্রমিক নম্বর করি:

html<ul id="parent"></ul>

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  parent.append(li);
}

কোড 실행ের ফলাফল:

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

উদাহরণ

আসুন টেবিলটি tr এবং td দিয়ে পূরণ করি:

html<table id="table"></table>

javascriptlet table = document.querySelector('#table');

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // tr তৈরি করি
  
  // tr কে td দিয়ে পূরণ করি:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // td তৈরি করি
    td.textContent = j; // এতে টেক্সট লিখি
    
    tr.append(td); // তৈরি করা td টি tr এর শেষে যোগ করি
  }
  
  table.append(tr); // তৈরি করা tr টি টেবিলের শেষে যোগ করি
}

কোড 실행ের ফলাফল:

html<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

আরও দেখুন