Boa noite!
Estou fazendo uns exercicios e gostaria de tirar uma dúvida.
Eu tenho o seguinte html
<!DOCTYPE html>
<link rel="stylesheet" href="/style/create.css">
<body>
<div class="container">
<ul class="list">
<li class="list-item"> Consultar Registros </li>
<li class="list-item"> Atualizar Registros</li>
<li class="list-item"> Deletar Registros</li>
</ul>
<a class="list" href="/login.html"><img class="logout" src="./images/exit.png" alt=""> logout </a>
</div>
<div class="wrapper">
<div class="title">
Requisitos Funcionais</div>
<form id="formulario" action="#">
<div class="field">
<input type="text" required>
<label>Requisitos funcionais</label>
</div>
<div class="content">
<div class="req-link">
<br>
<a href="#" id="add" onclick="addItem()">Cadastrar mais um RF</a>
</div>
</div>
<div class="field">
<input type="text" required>
<label>Requisitos Não funcionais</label>
</div>
<div class="content">
<div class="req-link">
<br>
<a href="#">Cadastrar mais um RNF</a>
</div>
</div>
<div class="field">
<input type="submit" value="Cadastrar">
</div>
</form>
</div>
<script src="/js/rf.js"></script>
</body>
E o seguinte javascript
function addItem() {
document.getElementById("add").addEventListener("click", function() {
const div = document.createElement("div")
div.classList = "field"
const form = document.getElementById("formulario")
form.appendChild(div)
})
}
Porém essa função da o append embaixo do último FIELD que seria meu botão de cadastro, como posso fazer para escolher exatamente onde vou adicionar essa nova div criada dinamicamente?
Obrigado!