insertAdjacentElement ක්රමය
insertAdjacentElement ක්රමය පිටුවේ ඕනෑම ස්ථානයකට මූලද්රව්යයක් ඇතුළු කිරීමට ඉඩ සලසයි.
createElement භාවිතයෙන් මූලද්රව්යයක් සාදා ගැනීමෙන් පසු බහුලව භාවිතා වේ.
කේතය යොමු මූලද්රව්යයට සාපේක්ෂව ඇතුළු කෙරේ. යොමු මූලද්රව්යයට පෙර (ඇතුළු කිරීමේ ක්රමය beforeBegin),
එයට පසු (ඇතුළු කිරීමේ ක්රමය afterEnd),
එසේම යොමු මූලද්රව්යයේ ආරම්භයේ (ඇතුළු කිරීමේ ක්රමය afterBegin)
හෝ අවසානයේ (ඇතුළු කිරීමේ ක්රමය beforeEnd) ඇතුළු කිරීම කළ හැකිය.
වාක්ය රಚනය
යොමු මූලද්රව්යය.insertAdjacentElement(ඇතුළු කිරීමේ ක්රමය, ඇතුළු කිරීම සඳහා වන කේතය);
උදාහරණය . beforeBegin ක්රමය
යොමු මූලද්රව්යය #target මූලද්රව්යය වේවා.
අපි එයට පෙර නව ඡේදයක් ඇතුළු කරමු:
<div id="target">
<p>මූලද්රව්යය</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<p>!</p>
<div id="target">
<p>මූලද්රව්යය</p>
</div>
උදාහරණය . afterEnd ක්රමය
දැන් අපි යොමු මූලද්රව්යයට පසුව නව ඡේදයක් ඇතුළු කරමු:
<div id="target">
<p>මූලද්රව්යය</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="target">
<p>මූලද්රව්යය</p>
</div>
<p>!</p>
උදාහරණය . afterBegin ක්රමය
යොමු මූලද්රව්යයේ ආරම්භයේ නව ඡේදයක් ඇතුළු කරමු:
<div id="target">
<p>මූලද්රව්යය</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="target">
<p>!</p>
<p>මූලද්රව්යය</p>
</div>
උදාහරණය . beforeEnd ක්රමය
යොමු මූලද්රව්යයේ අවසානයේ නව ඡේදයක් ඇතුළු කරමු:
<div id="target">
<p>මූලද්රව්යය</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="target">
<p>මූලද්රව්යය</p>
<p>!</p>
</div>
මෙයද බලන්න
-
insertAdjacentHTMLක්රමය,
යම් ස්ථානයකට ටැග් ඇතුළු කරයි -
insertAdjacentTextක්රමය,
යම් ස්ථානයකට පාඨය ඇතුළු කරයි -
prependක්රමය,
මූලද්රව්ය ආරම්භයට ඇතුළු කරයි -
appendක්රමය,
මූලද්රව්ය අවසානයට ඇතුළු කරයි -
appendChildක්රමය,
මූලද්රව්ය මව් මූලද්රව්යයේ අවසානයට ඇතුළු කරයි -
insertBeforeක්රමය,
මූලද්රව්යයකට පෙර මූලද්රව්ය ඇතුළු කරයි
