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
    •

Comments