I'm new to javascript and just completed a tutorial on DOM manipulation.
However, new lis are added after the fist li, not at the end (unlike the tutorial).
I would love to understand why they are added exactly there and how to add them at the end.
const userList = document.querySelector(".name-list li");
const listInput = document.querySelector(".list-input");
const addListBtn = document.querySelector(".addListBtn");
addListBtn.addEventListener("click", function(){
const newLi = document.createElement("li");
const liContent = document.createTextNode(listInput.value);
newLi.appendChild(liContent);
userList.appendChild(newLi);
});<button class="addListBtn">Click me!</button>
<ul class="name-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="text" class="list-input">You're appending to userList which is defined like:
const userList = document.querySelector(".name-list li");
Note the li in the selector, so you're adding to a li
Update it to:
const userList = document.querySelector(".name-list");
So it's the list itself, not the li inside.
const userList = document.querySelector(".name-list");
const listInput = document.querySelector(".list-input");
const addListBtn = document.querySelector(".addListBtn");
addListBtn.addEventListener("click", function(){
const newLi = document.createElement("li");
const liContent = document.createTextNode(listInput.value);
newLi.appendChild(liContent);
userList.appendChild(newLi);
});<button class="addListBtn">Click me!</button>
<ul class="name-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="text" class="list-input">Remove li const userList = document.querySelector(".name-list");
const userList = document.querySelector(".name-list");
const listInput = document.querySelector(".list-input");
const addListBtn = document.querySelector(".addListBtn");
addListBtn.addEventListener("click", function(){
const newLi = document.createElement("li");
const liContent = document.createTextNode(listInput.value);
newLi.appendChild(liContent);
userList.appendChild(newLi);
});<button class="addListBtn">Click me!</button>
<ul class="name-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="text" class="list-input">For example:
function function1() {
var ul = document. getElementById("list");
var li = document. createElement("li");
li. appendChild(document. createTextNode("Four"));
ul. appendChild(li);
}