JavaScript appendChild

Javascript இல் appendChild method இங்கு ஒரு child element ஐ உருவாக்கி அதனை ஒரு parent element உடன் இணைப்பதற்கு அதாவது append செய்வதற்கு பயன்படுகிறது.

parentNode.appendChild(childNode);

Note: இங்கு appendChild method இல் ஒரு child element ஆனது argument ஆக அனுபப்படுகிறது. இந்த முறையை பயன்படுத்தி நாம் ஒரு parent element இன் உள்ளே child element ஐ insert செய்து கொள்ளலாம்.

Example1


<!DOCTYPE html>
<html>
<body>
        <script>
                let div = document.createElement('div');
                div.id = 'content';
                div.innerHTML = '<p>Create Element</p>';
        document.body.appendChild(div);
        </script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு body என்பது parent element ஆக செயல்படுகிறது. இங்கு முக்கியமாக ஒரு div element ஆனது உருவாக்கப்படுகிறது. அதேபோல் அதற்கு id attribute value 'content' எனவும் அதற்கு உள்ளே innerHTML tag ஆனது அதாவது p என்ற உருவாக்கப்படுகிறது மற்றும் innerText Create Element என கொடுக்கப்படுகிறது. எனவே இங்கு div மற்றும் p என்ற tag ஆனது ஒரு child tag ஆக செயல்படுகிறது. நாம் இங்கு இந்த div tag ஐ createElement method முறையில் create செய்கிறோம். அதனை div என்ற variable இல் store செய்து கொண்டு பின் அந்த div variable ஐ document.body.appendChild(div) என்ற method க்கு argument ஆக அனுப்புகிறோம். எனவே body என்ற parent tag இன் உள்ளே ஒரு child div tag உருவாக்கப்படுகிறது.

Output: 

Create Element

Example2


<!DOCTYPE html>
<html>
<body>
        <script>
                let div = document.createElement('div');
                div.id = 'youtube';
                div.innerHTML = '<p>Parallel Codes</p>';
        document.body.appendChild(div);
        </script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு body என்பது parent element ஆக செயல்படுகிறது. இங்கு முக்கியமாக ஒரு div element ஆனது உருவாக்கப்படுகிறது. அதேபோல் அதற்கு id attribute மற்றும் அதற்கு உள்ளே innerHTML tag ஆனது அதாவது p என்ற உருவாக்கப்படுகிறது. எனவே இங்கு div மற்றும் p என்ற tag ஆனது ஒரு child tag ஆக செயல்படுகிறது. நாம் இங்கு இந்த div tag ஐ createElement method முறையில் create செய்கிறோம். அதனை div என்ற variable இல் store செய்து கொண்டு பின் அந்த div variable ஐ document.body.appendChild(div) என்ற method க்கு argument ஆக அனுப்புகிறோம். எனவே body என்ற parent tag இன் உள்ளே ஒரு child div tag உருவாக்கப்படுகிறது.

Output: 

Parallel Codes

Comments