Как добавить элементы к body в цикле?

Question

[Ivan Petrov]

Почему то выводит только один чекбокс и последнюю запись из массива.
Но при каждой иттерации вроде бы должен добавлять еще один input и span в body.
Что я делаю не так?

var list = {

    parent: document.querySelector('body'),
    p: document.createElement('div'),
    input: document.createElement('input'),
    text: document.createElement('span'),

    createQuestion: function (answer) {

        this.p.innerHTML = answer;
        this.parent.appendChild(this.p);

    },

    createAnswer: function (num, answers) {
        this.input.type = 'checkbox';

        console.log(answers.length);

        for (i = 0; i < answers.length; i++) {
            this.text.innerHTML = answers[i];
            var text = this.text;
            this.parent.appendChild(this.input);
            this.parent.appendChild(text);
        }

    }
};

list.createQuestion('How are you?');
list.createAnswer(3, ['fdf', 'sdfsdf', 'sdfs']);

Answer 1

[Константин Громов]

В строке this.parent.appendChild(text); text всегда является ссылкой на элемент span, который был создан при объявлении объекта list. Если применять appendChild к одному и тому же элементу, он будет каждый раз переносить его из старого места на новое. Исходя из вашей задачи вам нужно создавать в каждой итерации новый элемент. Тоже самое относится и к input'у.