fizzbuzzmydom.js

// First we need to identify where in the DOM we're applying the list.
var parent = document.getElementById('output');
// Then we need to create the ordered list in the DOM.
var ol = document.createElement('ol');
// We have an ordered list. But we need to make sure it's within the "output" element!
parent.appendChild(ol);

// Time for some more sexy FizzBuzz. 
// This is FizzBuzzing from number 1 - 100. 
for (var i = 1; i <= 100; i++) {
	// Creating the list element that will contain Fizz, Buzz, FizzBuzz or just the list number.
	var el = document.createElement('li');
	if (i % 3 === 0 && i % 5 === 0) {
		// As the number is divisible by 3 & 5 (15), we make sure the <li> reads "FizzBuzz"
		el.textContent = "FizzBuzz";
	} else if (i % 3 === 0) {
		// As the number is divisible by 3, we make sure the <li> reads "Fizz"
		el.textContent = "Fizz";
	} else if (i % 5 === 0) {
		// As the number is divisible by 5, we make sure the <li> reads "Buzz"
		el.textContent = "Buzz";
	} else {
		// This sorry number is not divisible by 3, 5 or 3 & 5; so we just throw in the list number. 
		el.textContent = i;
	}
	// Append the list element to the ordered list!
	ol.appendChild(el);
}

// Wooo! \o/