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.