javascript – 将XML转换为HTML:最佳实践?

前端之家收集整理的这篇文章主要介绍了javascript – 将XML转换为HTML:最佳实践?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这样的 XML
  1. <Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/>

我需要在HTML标记中使用它:

  1. <a href="#" data-name="Syd Mead" data-id="3412"
  2. data-ntrack="28" data-pop="8"
  3. class="pop-8"><span>Syd Mead</span></a>

为最广泛的浏览器执行此操作的“正确”方法是什么?可以通过XSLT转换可靠地完成吗?是否更好地使用正则表达式(不太可能)或我必须解析xml,并为每个< Artist>标签读取每个属性并手动执行document.createElement和setAttribute?

<艺术家>标签位于父节点中,其中有很多.这是最好的做法吗?

解决方法

这看起来像是XSLT的完美候选者 – XML是干净的&形成良好.如果您担心浏览器兼容性,为什么不在服务器端进行转换?

这个XSLT将转换你的数据 – 你可以测试它here

来源数据:

  1. <Artists>
  2. <Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/>
  3. </Artists>

XSLT:

  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  3. <xsl:template match="/">
  4. <xsl:for-each select="Artists/Artist">
  5. <a href="#">
  6. <xsl:attribute name="data-id">
  7. <xsl:value-of select="@id"/>
  8. </xsl:attribute>
  9. <xsl:attribute name="data-ntrack">
  10. <xsl:value-of select="@ntrack"/>
  11. </xsl:attribute>
  12. <xsl:attribute name="data-pop">
  13. <xsl:value-of select="@pop"/>
  14. </xsl:attribute>
  15. <xsl:attribute name="data-name">
  16. <xsl:value-of select="@name"/>
  17. </xsl:attribute>
  18. <xsl:attribute name="class">
  19. <xsl:value-of select="concat('pop-',@pop)"/>
  20. </xsl:attribute>
  21.  
  22. <span><xsl:value-of select="@name"/></span>
  23. </a>
  24. </xsl:for-each>
  25. </xsl:template>
  26. </xsl:stylesheet>

我没有在客户端这样做,所以不幸的是我无法代表浏览器兼容性.

猜你在找的JavaScript相关文章