preserve HTML tags in XMLHttpRequest

Question

Suppose an XML has a text that contains HTML tags like <br/>, <b> and <i>.

Can I get the data with XMLHttpRequest and preserve those HTML tags?

text.xml

<div>
  <p>Foo bar <br/>foobar <b>bold</b> <i>italic</i></p>
</div>

index.html

<p id="text"></p>

script.js

var request;

function sendInfo() {
    var url = "text.xml";
        request = new XMLHttpRequest();

    try {
        request.onreadystatechange = getInfo;
        request.open("GET", url, true);
        request.send();
    }
    catch (e) {
        alert("Unable to connect to server");
    }
}

function getInfo() {
    if (request.readyState == 4) {
        var val = request.responseText;
        document.getElementById('text').innerHTML = val;
    }
}

sendInfo();

Result in the Browser:

Foo bar<br/>
foobar bold italic<br/><br/>

The <br/> tag seems to be preserved but <b> and <i> have no effect.

The HTML in Chrome's Elements tab looks like this:

<p id="text">
  <div>
    <p>
      "Foo bar "
      <br>
      "foobar "
      <b>bold</b> 
      <i>italic</i>
    </p>
  </div>
</p>

Am I on the right track with this? What do I miss?

Answer 1

Problem solved. As pointed out, the code works.

It was a CSS issue.

Specifically the b, u, i { font: inherit } in my reset.css in the index.html (in my dev environment).

Once I commented it out, the tags where applied as expected.

(My bad that I didn't test the simplified code I used for this question.)