HTML DOM - Changing HTML

HTML உள்ளடக்கத்தை மாற்றுதல்

HTML DOM, JavaScript க்கு HTML உறுப்புகளின் உரை மற்றும் உள்ளடக்கத்தை மாற்ற அனுமதிக்கிறது.

உள்ளடக்கத்தை மாற்ற எளிதான வழி innerHTML பண்பைப் பயன்படுத்துவதாகும்:

document.getElementById(id).innerHTML = new HTML

The innerHTML பண்பு

ஒரு உறுப்பின் உள்ளடக்கத்தைப் பெற எளிதான வழி innerHTML பண்பைப் பயன்படுத்துவதாகும்.

innerHTML பண்பு HTML உறுப்புகளின் உள்ளடக்கத்தைப் பெற அல்லது மாற்ற பயனுள்ளதாக இருக்கும்.

📝 குறிப்பு:

innerHTML பண்பு எந்த HTML உறுப்பையும் பெற அல்லது மாற்ற பயன்படுத்தப்படலாம், <html> மற்றும் <body> உட்பட.

பொதுவான தவறுகள்

⚠️ கவனிக்க:

DOM உறுப்பு இருப்பதற்கு முன்பே அதை அணுக முயற்சித்தல்
"demo" போன்ற ஒரு ஐடியில் மேற்கோள்களை மறந்துவிடுதல்

எடுத்துக்காட்டு

ஒரு <p> உறுப்பின் உள்ளடக்கத்தை மாற்றவும்:

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

எடுத்துக்காட்டு விளக்கம்:

மேலே உள்ள HTML ஆவணம் id="p1" உடன் ஒரு <p> உறுப்பைக் கொண்டுள்ளது
id="p1" உடன் உறுப்பைப் பெற HTML DOM ஐப் பயன்படுத்துகிறோம்
ஒரு JavaScript அந்த உறுப்பின் உள்ளடக்கத்தை (innerHTML) "New text!" என மாற்றுகிறது

எடுத்துக்காட்டு

ஒரு <h1> உறுப்பின் உள்ளடக்கத்தை மாற்றவும்:

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>

எடுத்துக்காட்டு விளக்கம்:

மேலே உள்ள HTML ஆவணம் id="id01" உடன் ஒரு <h1> உறுப்பைக் கொண்டுள்ளது
id="id01" உடன் உறுப்பைப் பெற HTML DOM ஐப் பயன்படுத்துகிறோம்
ஒரு JavaScript அந்த உறுப்பின் உள்ளடக்கத்தை (innerHTML) "New Heading" என மாற்றுகிறது

பண்புக்கூறை மாற்றுதல்

ஒரு HTML பண்புக்கூறின் மதிப்பை மாற்ற, இந்த தொடரியலைப் பயன்படுத்தவும்:

document.getElementById(id).attribute = new value

எடுத்துக்காட்டு

ஒரு <img> உறுப்பின் src பண்புக்கூறின் மதிப்பை மாற்றுகிறது:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

எடுத்துக்காட்டு விளக்கம்:

மேலே உள்ள HTML ஆவணம் id="myImage" உடன் ஒரு <img> உறுப்பைக் கொண்டுள்ளது
id="myImage" உடன் உறுப்பைப் பெற HTML DOM ஐப் பயன்படுத்துகிறோம்
ஒரு JavaScript அந்த உறுப்பின் src பண்புக்கூறை "smiley.gif" இலிருந்து "landscape.jpg" என மாற்றுகிறது

டைனமிக் HTML உள்ளடக்கம்

JavaScript டைனமிக் HTML உள்ளடக்கத்தை உருவாக்க முடியும்:

நடப்பு தேதி:

Date : Mon Jan 26 2026 16:27:44 GMT+0530 (India Standard Time)

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

document.write()

JavaScript இல், document.write() நேரடியாக HTML வெளியீட்டு ஸ்ட்ரீமில் எழுத பயன்படுத்தப்படலாம்:

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<body>

<p>Bla bla bla</p>

<script>
document.write(Date());
</script>

<p>Bla bla bla</p>

</body>
</html>

⚠️ எச்சரிக்கை !

ஆவணம் ஏற்றப்பட்ட பிறகு document.write() ஐப் பயன்படுத்த வேண்டாம். இது ஆவணத்தை மேலெழுதும்.

பயிற்சி

❓ ஒரு உறுப்பின் உள்ளடக்கத்தை மாற்றுவதற்கான சட்டபூர்வமான தொடரியல் எது?

let x = document.getElementById('demo')
x.content = 'Welcome';

✗ தவறு! .content என்பது HTML DOM இல் சட்டபூர்வமான பண்பு அல்ல

let x = document.getElementById('demo')
x.innerHTML = 'Welcome';

✓ சரி! .innerHTML என்பது ஒரு HTML உறுப்பின் உள்ளடக்கத்தை மாற்றுவதற்கான சட்டபூர்வமான பண்பாகும்

let x = document.getElementById('demo')
x.changeContent('Welcome');

✗ தவறு! .changeContent() என்பது HTML DOM இல் சட்டபூர்வமான முறை அல்ல