Javascript For Beginners

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: