Append html entity through JQuery.append

Question

I know there are such questions, but the solutions don't work for me.

I want to append Bootstrap message like this

But I cannot insert times HTML entity (×) as entity.

$(function() {
  var errors = {
    "error1": "message1",
    "error2": "message2"
  }

  $.each(errors, function(name, message) {
      var $span = $('<span/>', {
        text: "&#215;"
      });
      var $button = $('<button/>', {
        "class": "close"
      });
      var $alert = $('<div/>', {
        "class": "alert alert-danger alert-dismissible",
        text: message
      });
      $('#error-box').append($alert.append($button.append($span)));
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="error-box">
</div>

What's the problem? Your code works fine in the snippet. – Rory McCrossan Jan 19 '18 at 15:35 — Rory McCrossan, Jan 19 '18 at 15:35
code seems working fine. whats the issue? – Alive to die - Anant Jan 19 '18 at 15:36 — Alive to die - Anant, Jan 19 '18 at 15:36
It shows × at right instead of entity – Thelambofgoat Jan 19 '18 at 15:36 — Thelambofgoat, Jan 19 '18 at 15:36
Just change `text: "×"` to `html: "×"` – Reinstate Monica Cellio Jan 19 '18 at 15:39 — Reinstate Monica Cellio, Jan 19 '18 at 15:39

Shalitha Suranga · Accepted Answer · 2018-01-19T15:41:18.217

Here you can use html instead of text.

$(function() {


  var errors = {
    "error1": "message1",
    "error2": "message2"
  }

  $.each(errors, function(name, message) {
      var $span = $('<span/>', {
        html: "&#215;"
      });
      var $button = $('<button/>', {
        "class": "close"
      });
      var $alert = $('<div/>', {
        "class": "alert alert-danger alert-dismissible",
        text: message
      });
      $('#error-box').append($alert.append($button.append($span)));
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="error-box">
</div>

Append html entity through JQuery.append

1 Answers1