Create Element with JavaScript.

Today, i followed on the Bootcamp how to create an element in JavaScript.

The first way is made of 3 steps. First create an element with .createElement("tagName"), second add a content with .textContent, but still the element does not appear on the page. So the last step is with append() method, which put elements on the last child or last position, in case elements have to be first then we use prepend() method.

The second way is with innerHTML, which is a short version of .createElement("tagName").But, if there are many elements to be added ,best way is to use .createElement("tagName").

Below are some examples with Loop:

Create elements with .createElement("tagName") in JavaScript.

var powerRangers = [
    "Jason Lee Scott", 
    "Kimberly Hart", 
    "Zack Taylor"
]

var rangersList = document.getElementById("rangers")

for (var i = 0; i < powerRangers.length; i++) {
    var newName = document.createElement("li")
    newName.textContent = powerRangers[i]
    rangersList.append(newName)
}

Create elements with innerHTMLin JavaScript (with the same array as in the previous exercise).

var rangersList = document.getElementById("rangers")

  for(var i=0;i<powerRangers.length;i++){
      rangersList.innerHTML += "<li>"+powerRangers[i]+ "</li>"
  }

Here it is with an array object:

var powerRangers = [
    {name: "Jason Lee Scott", color: "Red"}, 
    {name: "Kimberly Hart", color: "Pink"}, 
    {name: "Zack Taylor", color: "Black"}
]

var rangersList = document.getElementById("rangers")

for(var i of powerRangers){
    rangersList.innerHTML += "<li>"+i.name,i.color+ "</li>"
}

Well, one of my English lesson is done, i got a certificate on udemy and the intermediate typing level is also done (certificate) .