append ක්‍රමය

append ක්‍රමය යම් අංගයක අවසානයට වෙනත් අංගයක් ඇතුළු කිරීමට ඉඩ සලසයි. පරාමිතියක් ලෙස මෙම ක්‍රමය අංගයක්, සාමාන්‍යයෙන් සෑදෙනු ලබන්නේ createElement හරහා, හෝ ලැයිස්තුවක් ලෙස ගනී. ක්ෂණිකවම එකට බහු අංග හෝ ලැයිස්තු එකතු කළ හැකිය, ඒවා කොමාවකින් වෙන් කර දක්වමින්.

වාක්‍ය රචනය

javascriptමව්‍ය.append(අංගය හෝ ලැයිස්තුව);

උදාහරණය

අපි ඡේදයක් සාදා, එයට පෙළ යොදා පිටුවේ #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>

මෙයද බලන්න