const app = document.getElementById('app');
app.innerHTML = `
  <h1>JavaScript DOM</h1>
  <ul>
    <li>1</li>
  </ul>
`;

const ul = app.querySelector('ul');

ul.insertAdjacentHTML('beforebegin', '<p>Before</p>'); // <p>Before</p><ul><li>1</li></ul>
ul.insertAdjacentHTML('afterbegin', '<li>First</li>'); // <li>First</li><ul><li>1</li></ul>
ul.insertAdjacentHTML('beforeend', '<li>Last</li>'); // <ul><li>1</li><li>Last</li></ul>
ul.insertAdjacentHTML('afterend', '<p>After</p>'); // <ul><li>1</li></ul><p>After</p>

 Using '

insertAdjacentHTML

' is faster than innerHTML.