function add() {
// get the current value of the input field
var val = document.querySelector('#newNumber').value;
if((val !== undefined) && (val !== "")) {
// val exists and non empty
// get the list of numbers. It's a <ul>
var ul = document.querySelector("#numbers");
// add it to the list as a new <li>
var newNumber = document.createElement("li");
newNumber.textContent = val;
// or newNumber.innerHTML = val
ul.append(newNumber);
}
}
function reset() {
// get the list of numbers. It's a <ul>
var ul = document.querySelector("#numbers");
// reset it: no children
ul.innerHTML = "";
}
JS.DOM.AddingElements.textContent.CreateElement.Append
------------------------------------------------------
A [Pen](https://codepen.io/Onlyforbopi/pen/LJoVLB) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).
[License](https://codepen.io/Onlyforbopi/pen/LJoVLB/license).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Adding new elements to the DOM</title>
</head>
<body>
<label for="newNumber">Please enter a number</label>
<input type="number" id="newNumber" value=0>
<button onclick="add();">Add to the list</button>
<br>
<button onclick="reset();">Reset list</button>
<p>You entered:</p>
<ul id="numbers"></ul>
</body>
</html>