使用JavaScript创建复选框并将标签置于右侧的问题求助

你当前的代码会让标签文本显示在复选框前面，原因是你先设置了label_chk_rec_log.textContent，再把复选框追加到标签末尾，自然文本在前、复选框在后。要实现复选框在文本左侧的结构，只需调整元素添加的顺序：

修正后的代码 #

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);
// 再添加标签文本（用createTextNode避免覆盖已有内容）
label_chk_rec_log.appendChild(document.createTextNode("Recordar usuario"));

为什么这样有效？ #

1. 先将复选框插入到空的<label>中，此时标签内只有复选框元素
2. 再通过createTextNode创建文本节点并追加到标签内，文本就会出现在复选框的右侧，正好符合你期望的HTML结构：

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

另一种调整方式（基于你原有代码修改） #

如果不想大幅改动原有代码，也可以在设置文本后，把复选框插入到文本节点的前面：

// 原有代码保留到设置textContent之后
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.insertBefore(input_chk_rec_log, label_chk_rec_log.firstChild);

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