Creating a ul with li in javascript and make li type checkbox with text

Question

so I'm trying to make this entire project in JS, and am now trying to translate my UL that's hiding lis that are checkboxes. went through the net but couldn't hack it.

HTML

<div class="checkBoxes">
        <span class="recipePicContainer">
            <img class="recipe" src="../images/grasshopper-cocktail.jpg" alt="Cocktail">
            <div>Cocktail</div>
        </span>
        <ul class="recipes">
           <li class="ingredient"><input type="checkbox"> ingredient 1</li>
           <li class="ingredient"><input type="checkbox"> ingredient 2</li>
           <li class="ingredient"><input type="checkbox"> ingredient 3</li>
           <li class="ingredient"><input type="checkbox"> ingredient 4</li>
           <li class="instructions">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
    </div>

JS

var $recipes = document.createElement("ul");
    document.$checkboxes.appendChild(ul);

    for (var i = 1; i <= 5; i++)
    {
        var li = document.createElement("li");
        li.className = "ingredients";

        var a = document.createElement("a");
        a.innerHTML = "Subfile " + i;

        li.appendChild(a);
        $recipes.appendChild(li);
    }

Answer 1

Yoy need to define $checkboxes first and the append $recipes to it, eg

var $recipes = document.createElement("ul");
var $checkboxes = document.getElementsByClassName('checkBoxes'); 

for (var i = 1; i <= 5; i++)
{
    var li = document.createElement("li");
    li.className = "ingredients";

    var a = document.createElement("a");
    a.innerHTML = "Subfile " + i;

    li.appendChild(a);
    $recipes.appendChild(li);

}

$checkboxes[0].appendChild($recipes);

You can find working demo of your code on this Jsbin