Property
The innerHTML Property
The innerHTML property mainly works in order to update or modify the text content of an HTML element.
Syntax
To change the content of an HTML element, we can use this by an ID method.
document.getElementById(id).innerHTML=”New Content”;
Here, id defines the HTML element whose content has been updated. Further, the content which is written here will be updated there.
Code:
<html>
<body>
<h2>JavaScript innerHTML property</h2>
<p id="p1">Hello TutorialsLink!</p>
<input type="button" onclick="myFunction()" value="Click Me!">
<script>
function myFunction(){
document.getElementById("p1").innerHTML = "Welcome TutorialsLink!";
}
</script>
</body>
</html>
Here, Content has been updated of an HTML element.
Output:
Styling Attribute
Here, we can also the attributes of an element. For example, style of an HTML element can also be modified by using this property.
Syntax
document.getElementById(id).style.property = “New Content”;Here, id represents the id of an HTML element whose style has been updated.
Code:
<html>
<body>
<h2>JavaScript innerHTML property</h2>
<h3> This example changes the style of an HTML element </h3>
<p id="id1">Hello TutorialsLink!</p>
<button type="button"
onclick="document.getElementById('id1').style.color = 'orange'">
Click Me!</button>
</body>
</html>
Output:
CONTRIBUTE
MOBILE APP
