`.innerHTML`

Reading and changing the content of an HTML element.

Time to read: less than 5 min

Briefly

The innerHTML property allows you to read the content of an element as an HTML string or set a new HTML.

The new HTML value must be passed as a string, and it will replace the current content of the element. An error will be thrown if an invalid HTML string is passed. An HTML string is a string that contains valid HTML markup. A DOM element cannot be passed to innerHTML.

Example

        
          
          <form>  <label>Login</label>  <input type="text" id="login">  <div class="error">Enter login</div></form>
          <form>
  <label>Login</label>
  <input type="text" id="login">
  <div class="error">Enter login</div>
</form>

        
          
          const form = document.querySelector('form')console.log(form.innerHTML)// '<label>Login</label>// <input type="text" id="login">// <div class="error">Enter login</div>'// Changing content to new HTMLform.innerHTML = '<div class="success">Login successful</div>'
          const form = document.querySelector('form')

console.log(form.innerHTML)
// '<label>Login</label>
// <input type="text" id="login">
// <div class="error">Enter login</div>'

// Changing content to new HTML
form.innerHTML = '<div class="success">Login successful</div>'

HTML after modification:

        
          
          <form>  <div class="success">Login successful</div></form>
          <form>
  <div class="success">Login successful</div>
</form>

Open demo in the new window

How to understand

The browser provides developers the ability to manage content on a page and change it as desired. innerHTML is the simplest way to read or change the HTML content of an element. This property uses strings, which makes it easy to change and clear the content of elements.

When a new value is assigned to innerHTML, all previous content is removed and new content is created, leading to a page reflow.

How to write

Accessing the innerHTML property will return the content of the element as an HTML string. You can view or change the content of all elements, including <html> and <body>. Assigning a new value to the property will clear all current content and replace it with new HTML.

        
          
          document.body.innerHTML = '<h1>Hello Inner HTML!<h1>'
          document.body.innerHTML = '<h1>Hello Inner HTML!<h1>'

As a result, the HTML will be inserted into the document:

        
          
          <h1>Hello Inner HTML!</h1>
          <h1>Hello Inner HTML!</h1>

        
          
          // Here a full-fledged DOM element is createdconst divEl = document.createElement('div')document.body.innerHTML = divEl
          // Here a full-fledged DOM element is created
const divEl = document.createElement('div')

document.body.innerHTML = divEl

Since divEl contains a DOM element object, when assigned to innerHTML, it will be converted to a string, resulting in the element inserting the string "[object HTMLDivElement]".

        
          
          <body>[object HTMLDivElement]<body>
          <body>[object HTMLDivElement]<body>

If you pass a string with invalid HTML to innerHTML, an error will be thrown. However, most modern browsers help developers. They can automatically complete the markup (for example, if a tag was forgotten to be closed) and even allow the use of custom tags. Therefore, encountering an error when passing invalid HTML to innerHTML is very difficult.

Despite the fact that you can insert any HTML using innerHTML, there are some limitations related to web application security.

If you pass a string with a <script> tag to innerHTML, the element will be successfully inserted into the page, but the script contained within will not execute. However, it is possible to execute malicious code even without a <script> tag. Therefore, it is not recommended to insert any HTML from unreliable sources using innerHTML, such as those obtained from an unknown server.

It is also not recommended to use innerHTML if you only need to change text in an element. For this task, there are properties like innerText or textContent.

        
          
          // The script will become part of the body, but will not executedocument.body.innerHTML ='<script>alert("We couldn't hack you :(")</script>'// After insertion into HTML, the image will not load,// and then the code from onerror will executedocument.body.innerHTML ='<img src="broken-link" onerror="alert("Now you are definitely hacked!")">'
          // The script will become part of the body, but will not execute
document.body.innerHTML =
'<script>alert("We couldn't hack you :(")</script>'

// After insertion into HTML, the image will not load,
// and then the code from onerror will execute
document.body.innerHTML =
'<img src="broken-link" onerror="alert("Now you are definitely hacked!")">'

Briefly

Example

How to understand

How to write

Read also

Web Application Security and Common Attacks

DOM

Element

`Element`