DOM Help (displaying an unordered list of fruits and giving each fruit a class)

Question

So I have a variable with a list of fruits as shown below:

var fruits = [
"Apple",
"Banana",
"Grape",
"Pineapple",
"Pear"
 ];

Using DOM, I want to display an unordered list of the fruits and then give each of the fruits a class of "fruity".

I'm still very uncomfortable with DOM but this is what I have attempted:

for (var i = 0; i < fruits.length; i++) {
var unorderedList = document.createElement('ul');
appendChild(ul);
}

for (var i = 0; i < fruits.length; i++) {
var class = document.createElement('class', 'fruity');
appendChild(class);
}

Can someone tell me if I'm at least on the right track? What I excluded? Am I using "document.createElement" where it's needed? I am totally stuck =/ Thank You.

Answer 1

You are on the right track.

You want to create one ul element and then multiple li elements. class is not an element , it's an attribute; you can set the class of an element by using its className reflected property (for historical reasons, the reflected property isn't just called class ).

So:

var ul = document.createElement('ul');
fruits.forEach(function(fruit) {
    var li = document.createElement('li');
    li.innerHTML = fruit; // For instance, just to give us something to see
    li.className = "fruity";
    ul.appendChild(li);
});

...then append ul somewhere, eg:

document.body.appendChild(ul);

...or similar.

Live Example:

 var fruits = [ "Apple", "Banana", "Grape", "Pineapple", "Pear" ]; var ul = document.createElement('ul'); fruits.forEach(function(fruit) { var li = document.createElement('li'); li.innerHTML = fruit; // For instance, just to give us something to see li.className = "fruity"; ul.appendChild(li); }); document.body.appendChild(ul);

 .fruity { color: purple; }

(They're purple because of the class fruity .)

More on the DOM: http://www.w3.org/DOM/DOMTR

Answer 2

You've taken a detour from the right track ;)

var unorderedList = document.createElement("ul");

 fruits.forEach(function (fruit) {
     var listElement = document.createElement("li");
     var listText = document.createTextNode(fruit);
     listElement.appendChild(listText);
     listElement.className = "fruity";
     unorderedList.append(listElement);
 }

 // assuming you have an element with id = "fruits" in your html 
 document.getElementById("fruits").appendChild(unorderedList);

Answer 3

You can assign the className and innerHTML on the same loop, ie:

 var fruits = [ "Apple", "Banana", "Grape", "Pineapple", "Pear" ]; var myElement = document.getElementById("myFruits"); for (var i = 0; i < fruits.length; i++) { var unorderedList = document.createElement('li'); unorderedList.innerHTML = fruits[i]; unorderedList.className = fruits[i]; myElement.appendChild(unorderedList); }

 <ul id="myFruits"></ul>

---

The above js will regenerate the following html

<ul id="myFruits">
<li class="Apple">Apple</li>
<li class="Banana">Banana</li>
<li class="Grape">Grape</li>
<li class="Pineapple">Pineapple</li>
<li class="Pear">Pear</li>
</ul>