append ක්රමය
append ක්රමය යම් අංගයක
අවසානයට වෙනත් අංගයක් ඇතුළු කිරීමට ඉඩ සලසයි. පරාමිතියක් ලෙස
මෙම ක්රමය අංගයක්, සාමාන්යයෙන් සෑදෙනු ලබන්නේ
createElement හරහා,
හෝ ලැයිස්තුවක් ලෙස ගනී. ක්ෂණිකවම එකට බහු
අංග හෝ ලැයිස්තු එකතු කළ හැකිය,
ඒවා කොමාවකින් වෙන් කර දක්වමින්.
වාක්ය රචනය
මව්ය.append(අංගය හෝ ලැයිස්තුව);
උදාහරණය
අපි ඡේදයක් සාදා, එයට පෙළ යොදා
පිටුවේ #parent ගොනුවේ අවසානයට තබමු:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.textContent = '!';
parent.append(p);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
උදාහරණය
ක්ෂණිකවම බහු ඡේද #parent ගොනුවේ
අවසානයට තබමු:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p1 = document.createElement('p');
p1.textContent = 'a';
let p2 = document.createElement('p');
p2.textContent = 'b';
parent.append(p1, p2);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
උදාහරණය
ක්රමයේ පරාමිතියක් ලෙස අපි ලැයිස්තුවක් භාවිතා කරමු:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
උදාහරණය
ul ලබා දී ඇත.
අපි එහි 9 li ටැග
තබමු,
එහිදී ඒවායේ පෙළ අනුක්රමික අංක කරමු:
<ul id="parent"></ul>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let li = document.createElement('li');
li.textContent = i;
parent.append(li);
}
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<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- වලින් පුරවමු:
<table id="table"></table>
let 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 වගුවේ අවසානයට එක් කරන්න
}
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<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>
මෙයද බලන්න
-
prependක්රමය,
අංග ආරම්භයට ඇතුළු කරයි -
appendChildක්රමය,
අංග අවසානයට ඇතුළු කරයි -
insertBeforeක්රමය,
අංගයකට පෙර අංගය ඇතුළු කරයි -
insertAdjacentElementක්රමය,
අංගය නියමිත ස්ථානයට ඇතුළු කරයි -
insertAdjacentHTMLක්රමය,
ටැග නියමිත ස්ථානයට ඇතුළු කරයි
