---
title: "How to change the html elements by JavaScript?"  
description: "How to change the html elements by JavaScript?"  
author: "Ravi Vishwakarma"  
published: 2021-07-19  
canonical: https://answers.mindstick.com/qa/93761/how-to-change-the-html-elements-by-javascript  
category: "web application"  
tags: ["javascript", "web development", "web application development"]  
reading_time: 1 minute  

---

# How to change the html elements by JavaScript?

How to change the [html](https://www.mindstick.com/articles/12368/why-are-html-themes-the-first-selection-of-designers) [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) by [JavaScript](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)?

## Answers

### Answer by Ethan Karla

in javascript has some methods to to change the internal data, style and attributes.

1. element.innerHTML
2. element.style.style-name
3. element.setAttribute
4. element.attribute

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title></title>
    <style>
        .page {
            background-color:green;
            }
    </style>
</head>
<body>
    <p id='p2'>Some data is available</p>
    <p id='p3'>Some data is available</p>
    <p id='p1'>Some data is available</p>
    <script>
        document.getElementById('p2').innerHTML += ' this is inner HTML';
        document.getElementById('p3').setAttribute('class', 'page');
        document.getElementById('p1').style.backgroundColor='red';
    </script>
</body>
</html>
```


---

Original Source: https://answers.mindstick.com/qa/93761/how-to-change-the-html-elements-by-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
