<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<input type="text" name="item" id="input">
<button id="b1">Add</button>
<button id="b2">Add</button>
<ul id="list">
</ul>
<script>
let b1 = document.getElementById("b1")
let b2 = document.getElementById("b2")
let input = document.getElementById("input")
let list = document.getElementById("list")
b1.addEventListener("click", function () {
if (input.value) {
list.innerHTML += `<li>${input.value}</li>`
}
})
b2.addEventListener("click", function () {
if (input.value) {
let li = document.createElement("li")
li.appendChild(document.createTextNode(input.value))
list.appendChild(li)
}
})
</script>
</body>
</html>
I am fairly new to javascript and came across multiple ways to get the same result.Would you prefer the #b1 function or the #b2 function and why?
