\
In Javascript, we have lots of different ways to manipulate DOM elements. DOM elements are the HTML elements we define when we write our scripts. Once we are targetting a particular DOM element, it's often useful to set its contents with new HTML content or to retrieve its HTML content for use somewhere else.

\
To do this, we use `innerHTML`. All Javascript DOM-type elements have an `innerHTML` property attached. __[Selecting HTML elements with Javascript can be learned about in a lot of depth here](https://fjolt.com/article/javascript-elements)__, however, the simplest way is to use a method like `getElementById`: \n 

```javascript
let getElement = document.getElementById('my-element')
```

\
Here, Javascript will look for an element with the id, `#my-element` in the HTML content of your page. If it exists, it will return a `HTMLElement`, which will contain an `innerHTML`property: \n 

```javascript
let getElement = document.getElementById('my-element')

console.log(getElement.innerHTML)
```

\
Now we can easily get the HTML contents, including text, of `#my-element`. **Note**: if you use `querySelectorAll` to select your HTML elements, this will return **multiple** `HTMLElement`s - so make sure you are only selecting one.

## Setting an HTML elements innerHTML

As well as getting `innerHTML` from an element, we can also redefine it as we see fit. For example, below we can set our elements’ contents to be just an `<h1>`tag: \n 

```javascript
let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>'
```

\
The contents we pass to `innerHTML` will be parsed as HTML, and rendered to the user. There are two things you should consider when doing this:

\
* If, for example, you are doing this via API, and someone can submit contents to appear on the page - you can run into some security problems. Therefore, you need to be careful how you use this, so that you don't end up with someone hacking and sending random content or malicious code to many users.
* This will replace all contents within the HTML element - which may not be what you want.

### Security concerns with using innerHTML

Regarding security concerns, if you are worried about using this method to set HTML, you can use the `setHTML()` which will sanatize input and remove any invalid HTML (unlike `innerHTML`). It also removes code it deems unsafe. Alternatively, you can use `textContent` - however this will not let you add HTML or scripts to a tag.

\
For basic manipulations where you are in complete control of what is being done, `innerHTML` can be used with relatively few concerns. So finally, you want to add content inside your HTML element in addition to what is already there, instead of replacing it while using `innerHTML`, you can do something like this: \n 

```javascript
let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>' + getElement.innerHTML
```

The above code will add a `<h1>` tag above the rest of your content - while still keeping your existing content.

## Conclusion

`innerHTML` is a common tool for manipulating or getting HTML content from an element. It's widely used, and good to understand. Although some security concerns exist regarding HTML insertion, in many cases it is a valid method to do this. 

\

---

Also published [here.](https://fjolt.com/article/javascript-innerhtml) 

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Cassandra Forward a free Cassandra-focused community event

Understanding innerHTML in Javascript

Understanding innerHTML in Javascript

@smpnjn