使用JavaScript动态创建单选按钮列表却显示为文本的原因排查

你的代码没能渲染出预期的单选按钮和标签，主要是两个问题导致的：

1. append() 方法的使用误区 #

当你给 Element.append() 传入字符串时，它会把这个字符串当作纯文本节点插入DOM，而不会将其解析为HTML元素。这就是为什么你只能看到一堆文本，看不到实际的单选按钮和标签组件。

2. 代码中的语法错误 #

你写了 result.data.[i].id —— 这里多了一个多余的点，正确写法应该是 result.data[i].id。这个语法错误会导致代码执行中断（如果浏览器严格校验的话），甚至可能连文本都无法正常显示。

修复方案 #

方案一：用 insertAdjacentHTML() 解析HTML字符串 #

这个方法可以直接把HTML字符串解析成DOM元素并插入到指定位置：

var a1 = document.getElementById("my_div");
for (var i = 0; i < result.data.length; i++) {
  // 先修正语法错误，再生成HTML字符串插入
  var htmlContent = "<label><input type=\"radio\" name=\"rbtn\" value=\"" + result.data[i].id + "\" />" + result.data[i].name + "</label>";
  a1.insertAdjacentHTML('beforeend', htmlContent);
}

方案二：手动创建DOM元素（更安全，规避XSS风险） #

如果 result.data 的内容来自用户输入，直接拼接HTML字符串可能存在XSS攻击风险，推荐手动创建元素的方式：

var a1 = document.getElementById("my_div");
for (var i = 0; i < result.data.length; i++) {
  var currentItem = result.data[i];
  
  // 创建label容器
  var label = document.createElement('label');
  // 创建单选按钮
  var radioBtn = document.createElement('input');
  radioBtn.type = 'radio';
  radioBtn.name = 'rbtn';
  radioBtn.value = currentItem.id;
  
  // 创建文本节点
  var nameText = document.createTextNode(currentItem.name);
  
  // 组装并插入到目标div
  label.appendChild(radioBtn);
  label.appendChild(nameText);
  a1.appendChild(label);
}

两种方案都能正确渲染出单选按钮和标签，其中方案二更适合处理不可信的数据源，安全性更高。

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