HTML entities not recognized and not displayed when retrieved from ajax

Question

This happens in all tested browsers (Chrome, Firefox, Opera ...)

Some HTML entities are are swallowed and not displayed when retrieved from ajax. The same HTML entity is displayed when it is hardcoded in the HTML source file.

Here is the actual output: (the entity is not display nether in the web page nor in the console)

the entity is not display nether in the web page nor in the console

Here is the expected output:

enter image description here

Here is the javascript that retrieves the entity:

<html>
<head>
<script type="text/javascript">
  function injectEntity(){
       var xhr = new XMLHttpRequest();
        xhr.open("POST", "entity.php", true);

       xhr.onreadystatechange = function(){
           if(xhr.readyState == 4){
               var doc = xhr.responseXML;
             console.log(xhr.responseText);
             var div = document.getElementById("container");   
               div.appendChild(doc.getElementById("the-entity"));
           }   
       }
      xhr.send(null);
    }
</script>
</head>
<body>
   <a href="#" onclick="injectEntity();">inject the following entity:</a> &#146;
  <div id="container">
   </div>
</body>
</html>

And here is the php file that is used to retrieve the entity:

<?php

header('Content-type: application/xml; charset=UTF-8');

$xml = new DOMDocument('1.0', 'utf-8');
$tag = $xml->createElement('b','&#146;');
$tag->setAttribute("id","the-entity");
$xml->appendChild($tag);
echo $xml->saveXML();

?>

My guess would be that you have to parse the text if you want the entities to be replaced. You can parse the text with innerHTML. So, instead of appendNode, use innerHTML to add the content to the DOM. — Šime Vidas

Quentin Quentin · Accepted Answer · 2012-02-08T15:19:27

You want ’, not  (which is an unprintable control character)

HTML entities not recognized and not displayed when retrieved from ajax

1 Answers