createElement ක්‍රමය

createElement ක්‍රමය ඔබට ටැග් නාමය පරාමිතියක් ලෙස ලබා දී නව මූලද්‍රව්‍යයක් සෑදීමට ඉඩ සලසයි. සෑදීමෙන් පසු මෙම මූලද්‍රව්‍යය සමඟ සාමාන්‍ය මූලද්‍රව්‍යයක් සමඟ වැඩ කරන ආකාරයටම වැඩ කළ හැකි අතර, එය පිටුවට prepend, append, appendChild, insertBefore හෝ insertAdjacentElement වැනි ක්‍රම මගින් එක් කළ හැකිය.

createElement ක්‍රමයේ ක්‍රියාකාරීත්වයේ ප්‍රතිඵලය විචල්‍යයකට ලියා තැබුවහොත්, එම විචල්‍යය තුළ මෙම මූලද්‍රව්‍යය querySelector හෝ getElementById හරහා ලබා ගත් මූලද්‍රව්‍යයක් මෙන් වනු ඇත. එකම වෙනස - අපගේ මූලද්‍රව්‍යය පිටුවේ තැන් නොගනී. එසේ නමුත් අපට එහි innerHTML වෙනස් කළ හැකිය, ගුණාංග වෙනස් කළ හැකිය, සිදුවීම් හසුරුවන්නන් එකතු කළ හැකිය සහ අවසානයේ එය පිටුවේ තැබිය හැකිය.

වාක්‍ය රචනය

javascriptdocument.createElement('tag name');

උදාහරණය

අපි ඡේදයක් සාදමු, එයට පෙළ අැතුලත් කරමු සහ පිටුවේ #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.appendChild(p);

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>!</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.appendChild(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>

උදාහරණය

අපි මූලද්‍රව්‍ය ඇතුල් කිරීමේදී ඒවාට සිදුවීම් හසුරුවන්නන් බැඳීමට ක්‍රියා කරමු:

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;
  
  li.addEventListener('click', function() {
    alert(this.textContent);
  });
  
  parent.appendChild(li);
};

Результат:

මෙයද බලන්න