createElement ක්රමය
createElement ක්රමය ඔබට ටැග් නාමය
පරාමිතියක් ලෙස ලබා දී නව මූලද්රව්යයක්
සෑදීමට ඉඩ සලසයි.
සෑදීමෙන් පසු මෙම මූලද්රව්යය සමඟ සාමාන්ය මූලද්රව්යයක්
සමඟ වැඩ කරන ආකාරයටම වැඩ කළ හැකි අතර,
එය පිටුවට prepend,
append,
appendChild,
insertBefore
හෝ insertAdjacentElement
වැනි ක්රම මගින් එක් කළ හැකිය.
createElement ක්රමයේ ක්රියාකාරීත්වයේ ප්රතිඵලය
විචල්යයකට ලියා තැබුවහොත්, එම විචල්යය තුළ
මෙම මූලද්රව්යය querySelector
හෝ getElementById
හරහා ලබා ගත් මූලද්රව්යයක් මෙන් වනු ඇත.
එකම වෙනස - අපගේ මූලද්රව්යය පිටුවේ
තැන් නොගනී. එසේ නමුත් අපට එහි
innerHTML වෙනස් කළ හැකිය, ගුණාංග වෙනස් කළ හැකිය,
සිදුවීම් හසුරුවන්නන් එකතු කළ හැකිය
සහ අවසානයේ එය පිටුවේ
තැබිය හැකිය.
වාක්ය රචනය
document.createElement('tag name');
උදාහරණය
අපි ඡේදයක් සාදමු, එයට පෙළ අැතුලත් කරමු
සහ පිටුවේ #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.appendChild(p);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</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.appendChild(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>
උදාහරණය
අපි මූලද්රව්ය ඇතුල් කිරීමේදී ඒවාට සිදුවීම් හසුරුවන්නන් බැඳීමට ක්රියා කරමු:
<ul id="parent"></ul>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let li = document.createElement('li');
li.textContent = i;
li.addEventListener('click', function() {
alert(this.textContent);
});
parent.appendChild(li);
};
:
මෙයද බලන්න
-
cloneNodeක්රමය,
මෙමගින් මූලද්රව්යයක් පිටපත් කළ හැකිය -
createTextNodeක්රමය,
මෙමගින් නව පෙළ නෝඩයක් සෑදිය හැකිය
