Getting INVALID_CHARACTER_ERR: DOM Exception 5

Question

I'm writing a simple to-do list. that a user input a text and the it's added as a checkbox. But i'm getting this error i have no idea what's it about

INVALID_CHARACTER_ERR: DOM Exception 5

window.onload = function(){
    var textBox = document.getElementById("taskInput"),
        submitBtn = document.getElementById("submit"),
        taskPool = document.getElementById("todoTask");

    submitBtn.addEventListener("click", function(){
        var task = document.createElement("<input type=\"checkbox\">" + textBox.value + "</input>");
        taskPool.appendChild(task);
    });

}

Solution

document.createElement takes the tag name only as its parameter, you'll have to set the type and value after

var task = document.createElement("input")
task.type = "checkbox";
task.value = textBox.value;

Also input tags are empty, there are no closing tag or inner html, the value is set as an attribute in markup.

Comments

[Rafael Adel]

ah, that worked. But how can i add a label inside each box ? because a checkbox without text appears when i press the button.

[Musa]

@Rafael you don't put labels inside cheeckboxes you put it next to them and use the label's for attribute to specify which checkbox the label is for.

[Musa]

@Rafael The property for the for attribute is htmlFor see http://jsfiddle.net/mowglisanu/6gbSE/4/

[Rafael Adel]

Ya, i just figured it out. Thanks a lot :)