JavaScript prepend()

Javascript இல் prepend() method இங்கு ஒரு parent node இல் இருக்கும் முதல் child க்கு முன் ஒரு element ஐ இணைப்பதற்கு பயன்படுகிறது.

parentNode.prepend(...nodes);

Note: இங்கு prepend() method இல் புதியதாக create செய்யப்பட்ட ஒன்று அல்லது அதற்கு மேற்பட்ட child node element ஆனது argument ஆக அனுபப்படுகிறது. இங்கு நாம் parent element ஐ select செய்து கொண்டு parentNode.prepend(...nodes) என call செய்யும் போது புதிய element ஆனது select செய்யப்பட்ட element இல் இருக்கும் child node element இல் முதல் child க்கு முன்னதாக இணைந்து கொள்ளும்.

Example1


<!DOCTYPE html>
<html>
<body>
                <ul id="app">
                        <li>About</li>
                        <li>Services</li>
                        <li>Contact</li>
                </ul>
        <script>
                var home = document.createElement('li');
                home.innerText = "Home";
                var res = document.querySelector('#app');
                res.prepend(home);
        </script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் மூன்று li tag கள் மட்டுமே இருக்கும், பிறகு ஒரு புதிய li tag ஆனது document.createElement('li') என்ற முறையை பயன்படுத்தி உருவாக்கப்படுகிறது. பின்பு அதற்கு innerText value Home என கொடுக்கிறோம். இங்கு ul என்ற parent element ஐ select செய்து கொண்டு res.prepend(Home) என கொடுக்கும் போது புதிய li tag ஆனது parent element அதாவது ul tag உள்ளே இருக்கும் முதல் li க்கு முன்னதாக இணைந்து கொள்கிறது.

Output: 

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

Example2


<!DOCTYPE html>
<html>
<body>
        <h1>My Favourite Birds</h1>
                <ul id="app">
                        <li>Peacock</li>
                        <li>Parrot</li>
                        <li>Hen</li>
                </ul>
        <script>
                var bird = document.createElement('li');
                bird.innerText = "Myna";
                var res = document.querySelector('#app');
                res.prepend(bird);
        </script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் மூன்று li tag கள் மட்டுமே இருக்கும், பிறகு ஒரு புதிய li tag ஆனது document.createElement('li') என்ற முறையை பயன்படுத்தி உருவாக்கப்படுகிறது. பின்பு அதற்கு innerText value Myna என கொடுக்கிறோம். இங்கு ul என்ற parent element ஐ select செய்து கொண்டு res.prepend(bird) என கொடுக்கும் போது புதிய li tag ஆனது parent element அதாவது ul tag உள்ளே இருக்கும் முதல் li க்கு முன்னதாக இணைந்து கொள்கிறது.

Output: 
        
  • Myna
    • 
        
  • Peacock
    • 
        
  • Parrot
    • 
        
  • Hen
    •

    Comments