JavaScript新手求助：如何将自动生成的表单插入指定DOM容器

你的代码存在几处语法与逻辑问题，导致表单无法正常显示，以下是问题点及修正后的完整代码：

问题点 #

• 提交按钮的type和value未加引号，JavaScript会将其解析为变量，引发语法错误
• 单选框name属性设置为每个选项的内容，导致每个单选框属于独立选项组，无法实现单选效果
• 未渲染题目文本（ques属性内容），页面仅显示选项不显示问题
• 循环使用固定边界i <=3，若选项数量变化会出错，灵活性不足
• 未考虑DOM加载时机，若脚本放在<head>中，执行时可能找不到id="anketler"的容器

修正后的代码 #

class soru {
    constructor(ques, opt1, opt2, opt3, opt4) {
        this.ques = ques;
        this.opt1 = opt1;
        this.opt2 = opt2;
        this.opt3 = opt3;
        this.opt4 = opt4;
        this.opts = [opt1, opt2, opt3, opt4];
    }
}

function createForm(x) {
    // 先检查目标容器是否存在
    const container = document.getElementById('anketler');
    if (!container) return;

    let form = document.createElement('form');
    
    // 添加题目文本
    const questionText = document.createElement('p');
    questionText.innerText = x.ques;
    form.appendChild(questionText);

    // 循环生成单选框，统一name属性实现单选
    for (let i = 0; i < x.opts.length; i++) {
        let input = document.createElement('input');
        input.type = 'radio';
        input.id = `option-${i}`; // 用规范id避免重复冲突
        input.name = 'answer'; // 统一name属性
        input.value = x.opts[i];
        form.appendChild(input);

        let label = document.createElement('label');
        label.htmlFor = `option-${i}`; // JS中需用htmlFor对应HTML的for属性
        label.innerText = x.opts[i];
        form.appendChild(label);
        
        // 添加换行优化排版
        form.appendChild(document.createElement('br'));
    }

    let submit = document.createElement('button');
    submit.type = 'submit'; // 字符串类型需加引号
    submit.innerText = 'Gönder'; // 按钮文本用innerText设置
    form.appendChild(submit);

    container.appendChild(form);
}

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', () => {
    const yeni_soru = new soru(
        'Soru1: En salak bekarlar diyarı üyesi ?',
        'Egemen',
        'Atakan',
        'Batuhan',
        'Kerem'
    );
    createForm(yeni_soru);
});

额外说明 #

• 把label.for改为label.htmlFor，因为for是JavaScript保留字，DOM元素需用htmlFor映射HTML的for属性
• 给单选框设置了更规范的ID，避免选项内容重复时出现ID冲突
• 添加换行元素让选项排版更清晰
• 用DOMContentLoaded事件确保DOM加载完成后再执行代码，避免找不到容器的问题

内容的提问来源于stack exchange，提问作者zugfool