JavaScript insertBefore

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

parentNode.insertBefore(newNode, existingNode)

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

Example1


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript insertBefore()</title>
</head>
<body>
    <ul id="menu">
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = 'Home';
        menu.insertBefore(li, menu.firstElementChild);
    </script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் மூன்று li tag கள் உள்ளது. இங்கு document.createElement('li') என்ற முறையை பயன்படுத்தி ஒரு li tag ஐ create செய்து கொள்கிறோம், அதேபோல் அதற்கு li.textContent = 'Home' என கொடுக்கிறோம். இங்கு menu.firstElementChild என்ற முறையை பயன்படுத்தி <li>Services</li> என்ற tag ஐ select செய்து கொண்டு menu.insertBefore(li, menu.firstElementChild) என்ற method இல் argument ஆக அனுப்பும் போது <li>Home</li> என்ற tag ஆனது இணைந்து கொள்கிறது.

Output: 

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

Example2


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript insertBefore()</title>
</head>
<body>
    <ul id="menu">
        <li>Rose</li>
        <li>Lotus</li>
        <li>Jasmine</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = 'Sunflower';
        menu.insertBefore(li, menu.firstElementChild);
    </script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் மூன்று li tag கள் உள்ளது. இங்கு document.createElement('li') என்ற முறையை பயன்படுத்தி ஒரு li tag ஐ create செய்து கொள்கிறோம், அதேபோல் அதற்கு li.textContent = 'Sunflower' என கொடுக்கிறோம். இங்கு menu.firstElementChild என்ற முறையை பயன்படுத்தி <li>Rose</li> என்ற tag ஐ select செய்து கொண்டு menu.insertBefore(li, menu.firstElementChild) என்ற method இல் argument ஆக அனுப்பும் போது <li>Sunflower</li> என்ற tag ஆனது இணைந்து கொள்கிறது.

Output: 
        
    
        
  • Sunflower
    • 
        
  • Rose
    • 
        
  • Lotus
    • 
        
  • Jasmine
    •

Comments