Insert HTML code to div onClick but does not replace existing code

Tags: ,

I would like to insert HTML code to make a “list”. I’ve seen examples of innerHTML but that just replaces the existing code. How can I add more code without replacing the current code?

var addTo = document.querySelector(".activePage")[0];
var addHTML = '
<div id="item1">
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>

<nav class="activePage"><nav>


Use insertAdjacentHtml. Docs –

var addTo = document.querySelector(".activePage");

var addHTML = '<div id="item1"><h1>This is a heading</h1><p>This is a paragraph</p></div>

addTo.insertAdjacentHtml(addHTML, 'beforeEnd')

‘beforeEnd’ means it will add right before the end of the element(inside the element).

Source: stackoverflow