Manipulating HTML Content

Estimated reading: 1 minute 65 views

innerHTML
The innerHTML property sets or returns the HTML content (inner HTML) of an element.

				
					element.innerHTML = newHTML;

Property:
element: The HTML element whose content is to be manipulated.
newHTML: A string representing the new HTML content to be set.

				
					const output = document.getElementById('output');

output.innerHTML = 'New content';

Example

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Event Listener</title>
</head>
<body>
    <button id="myButton">Click me</button>
    <div id="output">Initial Text</div>
    
    <script>
        const myButton = document.getElementById('myButton');
        const output = document.getElementById('output');

        function buttonClick() {
            output.innerHTML = 'Button clicked!';
        }

        myButton.addEventListener('click', buttonClick);
    </script>
</body>
</html>