Beginner Friendly · Hands-on · Free

Clone an element and all of its descendants

Javascript இல் cloneNode() method இங்கு ஒரு element ஐ select செய்து கொண்டு அதனை clone செய்வதற்கு பயன்படுகிறது

5 min read Updated Dec 13, 2025
← Previous Js Next →

JavaScript cloneNode

Javascript இல் cloneNode() method இங்கு ஒரு element ஐ select செய்து கொண்டு அதனை clone செய்வதற்கு பயன்படுகிறது.

originalNode.cloneNode(deep);

Note: இங்கு cloneNode() method இல் ஒரு குறிப்பிட்ட element ஐ select செய்து கொண்டு பின்னர் அதனை clone செய்து நமக்கு தேவைப்படும் சமயங்களில் பயன்படுத்தி கொள்ளலாம். இங்கு ஒரு argument அனுபப்படுகிறது அந்த argument ஆனது true அல்லது false ஆக இருக்கலாம். இங்கு முக்கியமாக argument true என கொடுக்கும் போது அந்த குறிப்பிட்ட element மற்றும் அதனுள் இருக்கும் child element ம் சேர்த்து clone செய்கிறது. அதேபோல் argument false என கொடுக்கும் போது ஒரு element ஐ மட்டுமே select செய்கிறது அதனுள் இருக்கும் child element ஐ தவிர்த்து விடுகிறது.

Example


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript cloneNode() Demo</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        let menu = document.querySelector('#menu');
        let clonedMenu = menu.cloneNode(true);
        clonedMenu.id = 'menu-mobile';
        document.body.appendChild(clonedMenu);
    </script>
</body>
</html>

மேலே உள்ள Example-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் நான்கு li tag கள் உள்ளது.இங்கு parent ul tag க்கு id attribute menu என உள்ளது. இங்கு முதலில் document.querySelector('#menu') என்ற முறையை பயன்படுத்தி அந்த parent element ஐ select செய்து கொள்கிறோம். பிறகு menu.cloneNode(true) என கொடுக்கும் போது நாம் select செய்த menu என்ற id attribute கொண்ட ul tag மற்றும் அதன் child tag களை clone செய்து ஒரு variable இல் store செய்து கொள்கிறோம். clone செய்யப்பட்ட node க்கு ஒரு புதிய id attribute menu-mobile என கொடுக்கிறோம்.document.body.appendChild(clonedMenu) இங்கு கொடுக்கும் போது body tag இல் clone செய்யப்பட்ட tag ஆனது இணைந்து கொள்கிறது.

Output: 

 
    
      
  • Home
    • 
      
  • Services
    • 
      
  • About
    • 
      
  • Contact
    •
இது பற்றிய தங்களின் கருத்துகளை இங்கே பதிவிடுங்கள் . இது பயனுள்ளதாக விரும்பினால் மற்றவர்களுக்கும் இதை share செய்யுங்கள்.