在javascript中使用li创建ul并使用文本制作li类型复选框

时间:2017-07-18 08:49:38

标签: javascript html-lists createelement

所以我试图在JS中创建这个整个项目,现在我正在尝试翻译我隐藏lis的复选框。通过网络,但无法破解它。

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

1 个答案:

答案 0 :(得分:0)

Yoy需要首先定义public function orders(){ return $this->hasManyThrough('Contact', 'Account', 'owner_id')->join('orders','contact.id','=','orders.contact_ID')->select('orders.*'); } 并向其添加$checkboxes,例如

$recipes

您可以在此Jsbin

上找到代码的工作演示