在jquery文本方法中使用样式

Question

我有一个bootstrap模式对话框，其内容是根据用户选择的内容在按钮点击中动态设置的。我想将选择显示为粗体。但是，在渲染时，它会显示粗体标记（小于b大于）和（小于正斜杠b大于）而不是粗体文本。

 JS
 $("#SubmitBtn").click(function () {
     var dropDownText = $("#DSLDropDownList option:selected").text();

     $('#ConfirmationDialog').modal('show');

     $('#ConfirmationMessage').text('You selected ' + '<b>' + dropDownText + '</b>'
 )
 -----------------------------------------------------------------------
 HTML
 <button type="button" id="SubmitBtn" class="btn btn-primary">Submit</button>

 <div id="ConfirmationDialog" class="modal fade" role="dialog">
      <div class="modal-dialog">
           <div class="modal-content">
                  <div id="ConfirmationMessage"></div>
           </div>
      </div>
 </div>

我希望它显示，You Selected后跟dropDownText的值以粗体显示。相反，它显示粗体标签。

Answer 1

.text()以明文

呈现给定输入

使用.html()代替.text()：

$('#ConfirmationMessage').html('You selected ' + '<b>' + dropDownText + '</b>');

示例

var dropDownText = "foo";

$('#ConfirmationMessage').html('You selected ' + '<b>' + dropDownText + '</b>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<span id="ConfirmationMessage"></span>

Answer 2

$("#ConfirmationMessage").html("<b>You selected " + dropDownText + " </b>");