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