Using style in jquery text method

Question

I have a bootstrap modal dialog whose content is being dynamically set in button click based on what is selected by the user. I would like to display the selection as bold. However, when rendered it displays the bold tags (less than b greater than) and (less than forward slash b greater than) instead of text being bold.

 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>

I would like it to display, You Selected followed by value of dropDownText in bold font. Instead it displays bold tags.

Jaqen H'ghar · Accepted Answer · 2017-02-08 19:35:12Z

2

.text() renders given input as plaintext

Use .html() instead of .text():

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

Example

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>

edited Feb 8, 2017 at 19:35

answered Feb 8, 2017 at 19:29

Jaqen H'ghar

17k8 gold badges52 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaqen H'ghar Over a year ago

Valar morghulis :)

muratkh · Accepted Answer · 2017-02-08 19:36:23Z

1

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

edited Feb 8, 2017 at 19:36

answered Feb 8, 2017 at 19:34

muratkh

1238 bronze badges

3 Comments

Zakaria Acharki Over a year ago

No need for duplicate answers please.

muratkh Over a year ago

don't forget the close the parenthesis

muratkh Over a year ago

first answer won't work cause the parenthesis must close and a semicolon

Collectives™ on Stack Overflow

Using style in jquery text method

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related