通过jQuery.append添加HTML实体失败，求Bootstrap提示框解决方案

我懂你的困扰——你在构建可关闭的Bootstrap提示框时，想把×这个HTML实体作为关闭按钮的叉号，但它总是以纯文本形式显示，没法渲染成预期的叉号图标对吧？

问题出在哪 #

你创建<span>元素时用了text: "×"，jQuery的text()方法（包括这里的text属性参数）会把传入的内容当作纯文本处理，不会解析HTML实体，所以×就直接原样输出了，不会变成叉号。

修复方案 #

把text属性换成html属性，这样jQuery就会解析HTML实体并渲染成对应的字符：

$(function() { 
  var errors = { 
    "error1": "message1", 
    "error2": "message2" 
  };
  $.each(errors, function(name, message) { 
    // 将text替换为html，让HTML实体被解析
    var $span = $('<span/>', { html: "&#215;" }); 
    var $button = $('<button/>', { 
      "class": "close", 
      "type": "button",
      "data-dismiss": "alert" // 加上这个属性，让Bootstrap处理关闭逻辑
    });
    var $alert = $('<div/>', { 
      "class": "alert alert-danger alert-dismissible", 
      text: message 
    }); 
    $('#error-box').append($alert.append($button.append($span))); 
  }); 
});

顺带提两个实用小优化：

• 给关闭按钮加上type="button"，避免它默认触发表单提交；
• 添加data-dismiss="alert"属性，这样点击叉号时Bootstrap会自动隐藏提示框，不用自己写额外的关闭逻辑。

替代方案：直接用Unicode字符 #

你也可以跳过HTML实体，直接用叉号的Unicode字符×（对应代码\u00D7），这样用text属性也能正常显示：

var $span = $('<span/>', { text: "\u00D7" });

这样修改后，你的提示框就能正确显示关闭叉号啦。

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