innerHtml frisst Checkbox

[hmm]

erst text dann checkbox:

        var li = document.createElement("li");
        var input = document.createElement("input");
        input.setAttribute("type", "checkbox");
        if(vertragsarten[q] == vertragsart) {
            input.setAttribute("checked", "checked");
        }
        li.innerHTML = vertragsarten[q];
        li.appendChild(input);
        $('#vertragsarten_'+i).append(li);

wills drehen, aber dadurch hab ich nur text und keine checkbox:

        var li = document.createElement("li");
        var input = document.createElement("input");
        input.setAttribute("type", "checkbox");
        if(vertragsarten[q] == vertragsart) {
            input.setAttribute("checked", "checked");
        }
        li.appendChild(input);
        li.innerHTML = vertragsarten[q];//gedreht
        $('#vertragsarten_'+i).append(li);

wie mach ich das jetzt?