在 XMLHttpRequest 中保留 HTML 标签 text.xmlindex.htmlscript.js

问题描述

假设一个 XML 的文本包含 HTML 标记，如 <br/>、<b> 和 <i>。

我可以使用 XMLHttpRequest 获取数据并保留那些 HTML 标签吗？

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();

浏览器中的结果：

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

<br/> 标签似乎被保留了，但 <b> 和 <i> 没有效果。

Chrome 元素选项卡中的 HTML 如下所示：

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

我是否在正确的轨道上？我想念什么？

解决方法

问题已解决。正如所指出的，代码有效。

这是一个 CSS 问题。

特别是我的 b,u,i { font: inherit } reset.css 在 index.html 中（在我的开发环境中）。

一旦我将其注释掉，标签就会按预期应用。

（我的错是我没有测试我用于这个问题的简化代码。）