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 . All Javascript DOM-type elements have an property attached. , however, the simplest way is to use a method like : innerHTML innerHTML Selecting HTML elements with Javascript can be learned about in a lot of depth here getElementById let getElement = document.getElementById('my-element') Here, Javascript will look for an element with the id, in the HTML content of your page. If it exists, it will return a , which will contain an property: #my-element HTMLElement innerHTML let getElement = document.getElementById('my-element') console.log(getElement.innerHTML) Now we can easily get the HTML contents, including text, of . : if you use to select your HTML elements, this will return s - so make sure you are only selecting one. #my-element Note querySelectorAll multiple HTMLElement Setting an HTML elements innerHTML As well as getting 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 tag: innerHTML <h1> let getElement = document.getElementById('my-element') getElement.innerHTML = '<h1>Hello World</h1>' The contents we pass to will be parsed as HTML, and rendered to the user. There are two things you should consider when doing this: innerHTML 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 which will sanatize input and remove any invalid HTML (unlike ). It also removes code it deems unsafe. Alternatively, you can use - however this will not let you add HTML or scripts to a tag. setHTML() innerHTML textContent For basic manipulations where you are in complete control of what is being done, 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 , you can do something like this: innerHTML innerHTML let getElement = document.getElementById('my-element') getElement.innerHTML = '<h1>Hello World</h1>' + getElement.innerHTML The above code will add a tag above the rest of your content - while still keeping your existing content. <h1> Conclusion 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. innerHTML Also published here.
