使用javascript创建一个带有标签的复选框

Question

我正在使用 Javascript 构建一个 html，我试图在复选框的右侧放置一个标签。

我用 Javascript 代码尝试了不同的行顺序和不同的 appendChild 顺序，但我从来没有得到我想要的结果。

    const div_recordar_login = document.createElement("div");
    div_recordar_login.classList.add("remember-forgot");
    form_login.appendChild(div_recordar_login);

    const label_chk_rec_log = document.createElement("label");
    div_recordar_login.appendChild(label_chk_rec_log);

    const input_chk_rec_log = document.createElement("input");
    input_chk_rec_log.type = "checkbox";
    label_chk_rec_log.textContent = "Recordar usuario ";
    label_chk_rec_log.appendChild(input_chk_rec_log);

这就是我在 html 中所期望的

    <div class="remember-forgot">
    <label><input type="checkbox">Recordar usuario</label>

这就是我得到的

    <div class="remember-forgot">
         <label>
         Recordar usuario 
         <input type="checkbox">
         </label>

Answer 1

const div_recordar_login = document.createElement("div");
div_recordar_login.classList.add("remember-forgot");
form_login.appendChild(div_recordar_login);

const label_chk_rec_log = document.createElement("label");
div_recordar_login.appendChild(label_chk_rec_log);


const input_chk_rec_log = document.createElement("input");
input_chk_rec_log.type = "checkbox";
label_chk_rec_log.appendChild(input_chk_rec_log);

// set text content of the label after appending checkbox input
label_chk_rec_log.textContent = "Recordar usuario";