cloneNode ක්රමය
cloneNode ක්රමය මඟින් මූලද්රව්යයක්
ක්ලෝනය කර එහි නිශ්චිත පිටපතක් ලබා ගත හැක. මෙම
පිටපත පිටුවට ඇතුළු කළ හැක්කේ
prepend,
append,
appendChild,
insertBefore
හෝ insertAdjacentElement
යන ක්රම භාවිතයෙනි.
පරාමිතිය ලෙස ක්රමයට true හෝ false ලැබේ.
true ලබා දුන්නේ නම්, මූලද්රව්යය සම්පූර්ණයෙන්ම ක්ලෝනය වේ,
සියලු ගුණාංග සහ අඩංගු මූලද්රව්ය සමඟ, තවද false ලබා දුන්නේ නම්
- මූලද්රව්යය පමණි (අඩංගු මූලද්රව්ය නොමැතිව).
වාක්ය රචනය
මූලද්රව්යය.cloneNode(true හෝ false);
නිදර්ශනය
elem යන පන්තිය සහිත කොටසේ පිටපතක් සාදා
එය #parent කොටසේ අවසානයට ඇතුළු කරමු:
<div id="parent">
<div class="elem">
<p>text1</p>
<p>text2</p>
</div>
</div>
let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');
let clone = elem.cloneNode(true);
parent.appendChild(clone);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<div class="elem">
<p>text1</p>
<p>text2</p>
</div>
<div class="elem">
<p>text1</p>
<p>text2</p>
</div>
</div>
නිදර්ශනය
ලබාගත් ක්ලෝනය සමඟ සාමාන්ය මූලද්රව්යයක් සමඟ වැඩ කරන්නේ එලෙසය:
<div id="parent">
<div class="elem">
<p>text1</p>
<p>text2</p>
</div>
</div>
let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');
let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';
parent.appendChild(clone);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<div class="elem">
<p>text1</p>
<p>text2</p>
</div>
<div class="elem">
<p>new text1</p>
<p>new text2</p>
</div>
</div>
මෙයද බලන්න
-
createElementක්රමය,
එහි ආධාරයෙන් නව මූලද්රව්යයක් සෑදිය හැක
