基于服务端JSON，如何用JavaScript最优渲染HTML并控制Checkbox显示

你当前的代码核心问题是：在拼接HTML字符串时直接写入if语句，这部分内容会被当作纯文本输出到页面，而不会执行条件判断逻辑。下面是几种简洁且高效的解决方案：

方案1：使用ES6模板字符串（推荐，可读性强） #

利用模板字符串的插值功能，先根据DISPLAY_CHECKBOX的值生成对应的Checkbox片段，再嵌入到整体HTML结构中：

$.each(data.MY_DATA, function(index, item) {
  // 根据DISPLAY_CHECKBOX生成Checkbox的HTML片段
  const checkboxHtml = item.DISPLAY_CHECKBOX === 1 ? '<input type="checkbox">' : '';
  
  // 用模板字符串拼接完整面板
  const panelHtml = `<div class="panel panel-default">
    <div class="panel-heading">${checkboxHtml}</div>
    <div class="panel-body">${item.STATUS}</div>
  </div>`;
  
  $('#container').append(panelHtml);
});

方案2：兼容老浏览器的字符串拼接 #

如果需要支持不支持ES6的旧浏览器，可以用传统的字符串拼接方式，先单独处理Checkbox逻辑：

$.each(data.MY_DATA, function(index, item) {
  let checkboxHtml = '';
  // 单独判断并生成Checkbox片段
  if (item.DISPLAY_CHECKBOX === 1) {
    checkboxHtml = '<input type="checkbox">';
  }
  
  // 拼接完整的面板HTML
  const panelHtml = '<div class="panel panel-default">' +
    '<div class="panel-heading">' + checkboxHtml + '</div>' +
    '<div class="panel-body">' + item.STATUS + '</div>' +
  '</div>';
  
  $('#container').append(panelHtml);
});

优化建议：减少DOM操作次数（大数据量场景） #

如果你的数据条目较多，频繁调用append()会触发多次DOM重绘，影响性能。可以先把所有HTML片段拼接成一个大字符串，再一次性插入到容器中：

let fullHtml = '';
$.each(data.MY_DATA, function(index, item) {
  const checkboxHtml = item.DISPLAY_CHECKBOX === 1 ? '<input type="checkbox">' : '';
  fullHtml += `<div class="panel panel-default">
    <div class="panel-heading">${checkboxHtml}</div>
    <div class="panel-body">${item.STATUS}</div>
  </div>`;
});
// 一次性插入到容器中（如果容器原有内容需要保留，改用append(fullHtml)）
$('#container').html(fullHtml);

为什么原代码不生效？ #

你之前写的if(this.DISPLAY_CHECKBOX == 1) {<input type="checkbox"> }会被当作普通文本直接输出到页面，因为JavaScript不会解析字符串内部的条件语句——只有在代码逻辑块中的if才会被执行，字符串里的只是字符内容而已。

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