How to Change innerHTML Using JavaScript
In JavaScript, such property interacts with the HTML elements, but the innerHTML is one of the most preferred ones. The innerHTML property generally returns the default value set in the HTML section a certain element.
The property can also set user-defined values; the value here represents a string. This brief tutorial will see how the property performs its task.
Use innerHTML Property to Change HTML Content
The innerHTML property is usually tagged along with the instance of an HTML element. A query selector will define a specific area to make a change, thus altering the previously hard-coded content.
We will have a div element with a certain string content here. If we had consoled out the specified element with the innerHTML property, we would exactly get what has been coded there.
For instance, we would have received abc as a result, but we have altered the value and set it to something different. So, even after the div element has its content, it will still be triggered by the new set string and preview in the window.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
function doChange(){
document.getElementById('change').innerHTML = ('Dealing with JavaScript innerHTML.');
}
window.onload=doChange;
</script>
<div id="change">abc</div>
</body>
</html>
Output:
