JavaScript replaceChild

Javascript இல் replaceChild() method இங்கு ஒரு element க்கு பதிலாக மற்றொரு element ஐ replace செய்வதற்கு replaceChild method ஆனது பயன்படுகிறது.

parentNode.replaceChild(newChild, oldChild);

Note: இங்கு replaceChild() method இல் இரண்டு argument கள் accept செய்கிறது. இங்கு முதல் argument புதிய element மற்றும் இரண்டாவது argument ஆனது old element ஆகவும் அமைகிறது. இந்த method முக்கியமாக ஒரு element க்கு பதிலாக மற்றொரு element ஐ replace செய்கிறது.

Example1


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript DOM: Replace Elements</title>
</head>
<body>
    <ul id="menu">
        <li>Homepage</li>
        <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.replaceChild(li, menu.firstElementChild);
    </script>
</body>
</html>

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

Output: 

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

Example2


<!DOCTYPE html>
<html>
<body>
    <ul id="menu">
        <li>Parrot</li>
        <li>Peacock</li>
        <li>Hen</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = 'Myna';
        menu.replaceChild(li, menu.firstElementChild);
    </script>
</body>
</html>

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

Output: 
        
  • Myna
    • 
        
  • Peacock
    • 
        
  • Hen
    •

    Comments