在 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

您需要先定义$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

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

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

javascript

html-lists

createelement