JavaScript append()

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

parentNode.append(...nodes);

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

Example1


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

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

Output: 

        
  • Peacock
    • 
        
  • Parrot
    • 
        
  • Hen
    • 
        
  • Myna
    •

    Comments