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