Adding an li in JS with appendChild to a ul that has an hr in it

Soo I did about 45 min of googling and couldn’t find anything..

Im working in JS and Im trying to add a li at the bottom of my ul list for an assignment. Part of the requirements is that I couldn’t make any changes to the HTML. Which looks like this:

            <hr>
            <ul id="list">
                <li>
                    <div>Milk</div>
                    <button>edit</button>
                    <button>X</button>
                </li>
                <li>
                    <div>Cheerios</div>
                    <button>edit</button>
                    <button>X</button>
                </li>
                <li>
                    <div>2 Goats</div>
                    <button>edit</button>
                    <button>X</button>
                </li>  
                <hr>              
            </ul>
        </div>

Because of the location of the bottom “hr” tag. All my newly appended children go under it.

This is what my JS looks like:

const form = document.addItem;
let listItem = document.createElement("li");
let editButton = document.createElement("button");
let xButton = document.createElement("button");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const item = form.title.value;
  console.log(item);
  form.title.value = "";

  listItem.textContent = item;
  editButton.textContent = "edit";
  xButton.textContent = "X";

  document.getElementById("list").appendChild(listItem);
  document.getElementById("list").appendChild(editButton);
  document.getElementById("list").appendChild(xButton);


});

Just want the newly appended children to either go above the hr tag or to the top of the list.