XHTML / JavaScript 动态内容未格式化答案

【问题标题】：XHTML / JavaScript dynamic content not formattedXHTML / JavaScript 动态内容未格式化
【发布时间】：2014-01-31 21:47:58
【问题描述】：

面临一个非常有趣的问题...

我使用 Javascript 和 xml 将动态内容加载到我的网站中。在 xml 文件中，我在我的 xml 转义字符中包含了像 This is some bold text note: 这样的格式化标签，但我无法在此显示页面，因为它们显示为小于和大于符号！

当我将内容加载到在我的 html 页面上具有 ID 的元素中时，这工作得非常好，但是当我使用 Javascript 创建一个元素，然后加载 xml 内容时，动态元素中的内容没有格式化，我能够看到页面上的 html 标签。代码sn-ps如下...

使用 ID（在浏览器中正确格式化）将内容填充到 html 元素中

    var paragraph = xmlDOM.getElementsByTagName("Overview")[0].childNodes[0].nodeValue;
    document.getElementById("Paragraph").innerHTML = paragraph;

将内容填充到动态元素中（html标签显示在浏览器的段落中）

   var paragraph = document.createElement('p');
   paragraph.appendChild(document.createTextNode(sections[i].childNodes[1].firstChild.nodeValue));

我被这个难住了。如果需要更多信息，请告诉我。

【问题讨论】：

如果您坚持使用 vanilla JS，请查看 jQuery 的 .on() 方法如何处理源中动态附加的 DOM 元素（即处理程序数据）。

标签： javascript xml xhtml

【解决方案1】：

您正在使用 createTextNode() 方法。这会将字符串输出为非 HTML（纯文本）。您可以在动态段落元素上使用 innerHTML 并用正常呈现的 HTML 内容填充它。

此处示例：http://jsfiddle.net/gpsaL/1/

var paragraph = document.createElement('p');
paragraph.innerHTML = sections[i].childNodes[1].firstChild.nodeValue;

希望这会有所帮助！

【讨论】：

像魅力一样工作！非常感谢。