What does it mean to use Javascript utilities

Question

I'm working on a challenge that requires us to use Underscore and JQuery to make changes to the DOM, but the second part of the challenge is requiring us to use Javascript browser utilities to do the same thing.

We are given an Array, and asked to manipulate the data and append the result to the DOM. I did that using the _.each method and $().append. For the second part, I am using the Javascript forEach() method to manipulate the data, but how do I use javascript utilities to append the resulting variable to the DOM with without jQuery?

Answer 1

Select the container, iterate the array with a for loop or forEach method, create elements and append them.

var arr = ["Alice", "Bob"]

var ulEl = document.querySelector("ul");
for (var i = 0; i < arr.length; ++i) {
  var li = document.createElement("li");
  li.innerHTML = arr[i];
  ulEl.appendChild(li);
}

<ul>

</ul>

Answer 2

Instead of using the jQuery library, its possible to manipulate the DOM using vanilla JavaScript functions. In particular, take a look at some of the functions in the DOM API like document.querySelector