JavaScript CreateElement

Javascript இல் CreateElement method ஆனது ஒரு புதிய element ஐ உருவாக்கி அதனை DOM tree உடன் இணைப்பதற்கு பயன்படுகிறது.

document.createElement(htmlTag);

Note: இங்கு createElement method ஆனது ஒரு htmlTag ஐ argument ஆக accept செய்கிறது. இந்த function ஆனது ஒரு html element ஐ உருவாக்கி அதனை DOM tree உடன் இணைப்பதற்கு பயன்படுகிறது. இந்த method ஆனது DOM இல் மிகவும் பயனுள்ள method ஆகும்.

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 கள் கொடுகப்பட்டுள்ளது. இங்கு document.createElement('div') மூலமாக ஒரு div element ஆனது உருவாக்கப்படுகிறது. பிறகு div.id = 'content' மற்றும் div.innerHTML = '<p>Create Element</p>' போன்றவற்றை கொடுக்கும் போது அதன் id மற்றும் innerHTML ஆகியன add ஆகிறது எனவே நமக்கு இங்கு div element ஆனது runtime இல் create செய்யப்படுகிறது.

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 கள் கொடுகப்பட்டுள்ளது.இங்கு document.createElement('div') மூலமாக ஒரு div element ஆனது உருவாக்கப்படுகிறது. பிறகு div.id = 'youtube' மற்றும் div.innerHTML = '<p>Parallel Codes</p>' போன்றவற்றை கொடுக்கும் போது அதன் id மற்றும் innerHTML ஆகியன add ஆகிறது எனவே நமக்கு இங்கு div element ஆனது runtime இல் create செய்யப்படுகிறது.

Output: 

Parallel Codes

Comments