onlyforbopi
9/24/2018 - 8:25 AM

JS.DOM.AddingElements.textContent.CreateElement.Append

JS.DOM.AddingElements.textContent.CreateElement.Append

style.css
content_copyfile_download
input:invalid {
  color:pink;
}
script.js
content_copyfile_download
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.markdown
content_copyfile_download
  • Rendered
  • Source

JS.DOM.AddingElements.textContent.CreateElement.Append

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!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>