在javascript中创建一个带有li的ul，并用文本制作li类型复选框

Question

所以我正在尝试用JS制作整个项目，现在正在尝试翻译我的UL，它隐藏了复选框。 通过网络但无法破解它。

.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 需要先定义$checkboxes并向其追加$recipes，例如

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);

您可以在此 Jsbin 上找到您的代码的工作演示