como trocar o innerHtml = "" por insertAdjacentHtml()

const $sectionLivros = document.querySelector('#livros')

function makeSecitonBook(listBooks) {
  $sectionLivros.innerHTML = ""
  // $sectionLivros.insertAdjacentHTML("beforeend", "")
  listBooks.forEach(elementLivro => {
    $sectionLivros.insertAdjacentHTML("beforeend", `
      <div class="livro">
        <img
          class=""
          src= ${elementLivro.imagem}
          alt= ${elementLivro.alt}
        />
        <h2 class="livro__titulo">
          ${elementLivro.titulo}
        </h2>
        <p class="livro__descricao">${elementLivro.autor}</p>
        <p class="livro__preco" id="preco">R$${elementLivro.preco.toFixed(2)}</p>
        <div class="tags">
          <span class="tag">${elementLivro.categoria}</span>
        </div>
      </div>
    `)
  })
};

esse codigo so funciona com o inner mas ele tem problemas de segurança, com o adjacent ele nao apaga o conteudo que tava antes