Beginner Friendly · Hands-on · Free

Insert a new node after an existing node as a child node of a specified parent node.

Javascript இல் insertAfter() method இங்கு ஒரு குறிப்பிட்ட child element இன் முன்னே மற்றொரு child element க்கு அடுத்ததாக insert செய்வதற்கு பயன்படுகிறது

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

JavaScript insertAfter

Javascript இல் insertAfter() method இங்கு ஒரு குறிப்பிட்ட child element இன் முன்னே மற்றொரு child element க்கு அடுத்ததாக insert செய்வதற்கு பயன்படுகிறது.

function insertAfter(newNode, existingNode) { existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling); }

Note: இங்கு insertAfter() method இல் இங்கு ஒரு குறிப்பிட்ட child element இன் முன்னே மற்றொரு child element க்கு அடுத்ததாக insert செய்வதற்கு பயன்படுகிறது. இங்கு newNode மற்றும் existingNode.nextSibling ஆகியன argument ஆக அனுபப்படுகிறது. இங்கு முக்கியமாக ஒரு existingNode ஐ select செய்து கொண்டு அதற்கு அடுத்ததாக ஒரு newNode ஐ insert செய்கிறோம். இங்கு insertAfter என்ற predefined function இந்த வேலையை நமக்கு செய்வதற்கு உதவுகிறது.

Example1


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript insertAfter() Demo</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        function insertAfter(newNode, existingNode) {
            existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
        }
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = 'Services';
        insertAfter(li,  menu.lastElementChild);
    </script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு insertAfter என்ற predefined function இந்த வேலையை நமக்கு செய்வதற்கு உதவுகிறது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் மூன்று li tag கள் உள்ளது. இங்கு document.createElement('li') என்ற முறையை பயன்படுத்தி ஒரு li tag ஐ create செய்து கொள்கிறோம், அதேபோல் அதற்கு li.textContent = 'Services' என கொடுக்கிறோம். பிறகு insertAfter(li, menu.lastElementChild) என்ற function இல் argument ஆக அனுப்பும் போது child element ஆனது insert ஆகிறது.

Output: 

    
    
        
  • Home
    • 
        
  • Services
    • 
        
  • About
    • 
        
  • Contact
    •

Example2


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript insertAfter() Demo</title>
</head>
<body>
    <ul id="menu">
        <li>Sunflower</li>
        <li>Rose</li>
        <li>Jasmine</li>
    </ul>
    <script>
        function insertAfter(newNode, existingNode) {
            existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
        }
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = 'Lotus';
        insertAfter(li,  menu.lastElementChild);
    </script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு insertAfter என்ற predefined function இந்த வேலையை நமக்கு செய்வதற்கு உதவுகிறது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் மூன்று li tag கள் உள்ளது. இங்கு document.createElement('li') என்ற முறையை பயன்படுத்தி ஒரு li tag ஐ create செய்து கொள்கிறோம், அதேபோல் அதற்கு li.textContent = 'Lotus' என கொடுக்கிறோம். பிறகு insertAfter(li, menu.lastElementChild) என்ற function இல் argument ஆக அனுப்பும் போது child element ஆனது insert ஆகிறது.

Output: 
        
    
        
  • Sunflower
    • 
        
  • Rose
    • 
        
  • Jasmine
    • 
        
  • Lotus
    •
இது பற்றிய தங்களின் கருத்துகளை இங்கே பதிவிடுங்கள் . இது பயனுள்ளதாக விரும்பினால் மற்றவர்களுக்கும் இதை share செய்யுங்கள்.