在HTML页中显示XML内容

提问者：小点点

在HTML页中显示XML内容

如何在同一页面中显示XML和其他类型的数据？

    <?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
    <cd>
        <title>Empire Burlesque</title>
        <artist>Bob Dylan</artist>
        <country>USA</country>
        <country>Columbia</country>
        <price>10.90</price>
        <year>1985</year>
    </cd>
</catalog>

上面的XML应该显示为带格式的原样。另外，我想在我的页面中显示HTML表格和其他东西。如何实现这一点？

我确实以字符串形式获取XML，而不是通过文件获取。
我不想解析它
我要显示（就这样）
如果您说到XSLT（请举例）
我在考虑使用Jquery插件（有示例吗？）

共3个答案

匿名用户

一个简单的解决方案是在</code>元素中嵌入，该元素将保留格式和尖括号。我还用<code>style=“border:none；”</code>删除了边框，这使得文本区域不可见。</p><p>下面是一个示例:http://jsfiddle.net/y9fqf/1/</p> </p> <div style="font-size:12px"> </div> </div> </div> <div class="ui segment"> <div class="stackable"> <strong>匿名用户</strong> <br><br> <p> <p>您可以使用旧的<code><xmp></code>标记。我不知道对浏览器的支持，但应该还能用。</p><pre><code><HTML> your code/tables <xmp> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <country>Columbia</country> <price>10.90</price> <year>1985</year> </cd> </catalog> </xmp> </code></pre><p>输出:</p><pre><code>your code/tables <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <country>Columbia</country> <price>10.90</price> <year>1985</year> </cd> </catalog> </code></pre> </p> <div style="font-size:12px"> </div> </div> </div> <div class="ui segment"> <div class="stackable"> <strong>匿名用户</strong> <br><br> <p> <pre><code><pre lang="xml" >{{xmlString}}</pre> </code></pre><p>这对我有用。感谢http://www.codeproject.com/answers/998872/display-xml-in-html-div#answer1</p> </p> <div style="font-size:12px"> </div> </div> </div> </div> <div class="ui segment" style="margin-top:20px;"> <h2 class="pt-2">相关问题</h2> <br> <div> <ul style="font-size:16px;"> <li style="line-height:30px;"><a href="/questions/402602" title="Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类" target="_blank">Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类</a></li> <li style="line-height:30px;"><a href="/questions/402600" title="在Hashmap中查找匹配的键/值对" target="_blank">在Hashmap中查找匹配的键/值对</a></li> <li style="line-height:30px;"><a href="/questions/402599" title="如何迭代Hashmap并与同一Hashmap中的其他键进行组合以比较它们的对象" target="_blank">如何迭代Hashmap并与同一Hashmap中的其他键进行组合以比较它们的对象</a></li> <li style="line-height:30px;"><a href="/questions/402598" title="HashCode-如果相等的对象碰巧在同一个桶中散列会发生什么？" target="_blank">HashCode-如果相等的对象碰巧在同一个桶中散列会发生什么？</a></li> <li style="line-height:30px;"><a href="/questions/402595" title="如何防止对数组中类对象的重复引用？" target="_blank">如何防止对数组中类对象的重复引用？</a></li> <li style="line-height:30px;"><a href="/questions/402590" title="如何以及何时在HashMap中完成重新散列" target="_blank">如何以及何时在HashMap中完成重新散列</a></li> <li style="line-height:30px;"><a href="/questions/402588" title="在hashmap或hashtable中重新散列的成本" target="_blank">在hashmap或hashtable中重新散列的成本</a></li> <li style="line-height:30px;"><a href="/questions/402587" title="HashMap如何识别内部数组中的哪些位置包含元素？" target="_blank">HashMap如何识别内部数组中的哪些位置包含元素？</a></li> <li style="line-height:30px;"><a href="/questions/402586" title="当HashMap增加其大小时，HashMap中值的索引会发生什么？" target="_blank">当HashMap增加其大小时，HashMap中值的索引会发生什么？</a></li> <li style="line-height:30px;"><a href="/questions/402585" title="@BeforeClass在ktor测试类中不工作" target="_blank">@BeforeClass在ktor测试类中不工作</a></li> <li style="line-height:30px;"><a href="/questions/402584" title="Jest vanilla JavaScript JSDOM刷新失败，切换beforeAll到before每一个后的第二次测试中断" target="_blank">Jest vanilla JavaScript JSDOM刷新失败，切换beforeAll到before每一个后的第二次测试中断</a></li> <li style="line-height:30px;"><a href="/questions/402582" title="在笑话中，定义全局变量是否与在BeforeAll中定义相同？" target="_blank">在笑话中，定义全局变量是否与在BeforeAll中定义相同？</a></li> <li style="line-height:30px;"><a href="/questions/402579" title="静态编程语言中@BeforeAll的正确解决方法是什么" target="_blank">静态编程语言中@BeforeAll的正确解决方法是什么</a></li> <li style="line-height:30px;"><a href="/questions/402578" title="线程“main”java. lang.NoClassDefFoundError中的异常：在Intellij[Spring boot]中" target="_blank">线程“main”java. lang.NoClassDefFoundError中的异常：在Intellij[Spring boot]中</a></li> <li style="line-height:30px;"><a href="/questions/402577" title="线程“main”java. lang.NoClassDefFoundError中的异常：org/apache/log4j/ProvisionNode" target="_blank">线程“main”java. lang.NoClassDefFoundError中的异常：org/apache/log4j/ProvisionNode</a></li> <li style="line-height:30px;"><a href="/questions/402573" title="异步管道是否从服务中定义并从组件变量指向的可观察对象取消订阅？" target="_blank">异步管道是否从服务中定义并从组件变量指向的可观察对象取消订阅？</a></li> <li style="line-height:30px;"><a href="/questions/402570" title="结合主体时不更新在模板中的异步管道可观察" target="_blank">结合主体时不更新在模板中的异步管道可观察</a></li> <li style="line-height:30px;"><a href="/questions/402566" title="组件中的Angular 2重复订阅" target="_blank">组件中的Angular 2重复订阅</a></li> <li style="line-height:30px;"><a href="/questions/402561" title="应该在ngOnDestroy（）中将Angular组件变量设置为null吗？" target="_blank">应该在ngOnDestroy（）中将Angular组件变量设置为null吗？</a></li> <li style="line-height:30px;"><a href="/questions/402556" title="Angular2处理非组件类中的订阅" target="_blank">Angular2处理非组件类中的订阅</a></li> </ul> </div> <br> </div> </div> <div class="col-md-4" style="height: auto !important; min-height: 0px !important;"> <div class="ui segment"> <h5>热门标签</h5> <hr> <a href="/questions/tag/1" title="Java" class="tags" style="margin:0 5px 5px 0">Java</a> <a href="/questions/tag/2" title="" class="tags" style="margin:0 5px 5px 0">JavaScript</a> <a href="/questions/tag/3" title="Python" class="tags" style="margin:0 5px 5px 0">Python</a> <a href="/questions/tag/4" title="PHP" class="tags" style="margin:0 5px 5px 0">PHP</a> <a href="/questions/tag/5" title="C#" class="tags" style="margin:0 5px 5px 0">C#</a> <a href="/questions/tag/6" title="Android" class="tags" style="margin:0 5px 5px 0">Android</a> <a href="/questions/tag/7" title="Html" class="tags" style="margin:0 5px 5px 0">Html</a> <a href="/questions/tag/8" title="jQuery" class="tags" style="margin:0 5px 5px 0">jQuery</a> <a href="/questions/tag/9" title="C++" class="tags" style="margin:0 5px 5px 0">C++</a> <a href="/questions/tag/10" title="Css" class="tags" style="margin:0 5px 5px 0">Css</a> <a href="/questions/tag/11" title="IOS" class="tags" style="margin:0 5px 5px 0">IOS</a> <a href="/questions/tag/12" title="MySQL" class="tags" style="margin:0 5px 5px 0">MySQL</a> <a href="/questions/tag/13" title="NodeJS" class="tags" style="margin:0 5px 5px 0">NodeJS</a> </div> </div> </div> </div> <script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script> <script> const btw = new BTWPlugin(); btw.init({ id: 'yArticle', blogId: '19381-1596467390161-874', name: '锋哥聊编程', qrcode: 'http://www.yiidian.com/statics/images/qywx.png', keyword: '1024', }); // 调整显示内容 var rm_btn = $("#read-more-btn"); rm_btn.html('~阅读全文~人机检测~'); </script> <script type="text/javascript" src="http://www.yiidian.com/api.php?op=count&id=4575&module=zsask"></script> <footer> <div class="deanfooter"> <div class="deanfttop nav-bar"> <div class="deanw1180"> <div class="deanlinks"> <ul> <li style="width:280px;"> <p>常见技术问题</p> <a href="/questions/402602" title="Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类" target="_blank">Android：在模块jefied-play-ser...</a> <a href="/questions/402601" title="HashMap如何跟踪entrySet等字段" target="_blank">HashMap如何跟踪entrySet等字段</a> <a href="/questions/402600" title="在Hashmap中查找匹配的键/值对" target="_blank">在Hashmap中查找匹配的键/值对</a> <a href="/questions/402599" title="如何迭代Hashmap并与同一Hashmap中的其他键进行组合以比较它们的对象" target="_blank">如何迭代Hashmap并与同一Hashmap...</a> <a href="/questions/402598" title="HashCode-如果相等的对象碰巧在同一个桶中散列会发生什么？" target="_blank">HashCode-如果相等的对象碰巧在...</a> <a href="/questions/402597" title="Java哈希码和桶大小-关系" target="_blank">Java哈希码和桶大小-关系</a> </li> <li> <p>常用工具</p> <a href="http://www.yiidian.com/blog/notes/" target="_blank">编程笔记</a> <a href="http://www.yiidian.com/blog/interview/" target="_blank">编程面试题</a> <a href="http://www.yiidian.com/java_jar" target="_blank">Java Jar包下载</a> <a href="http://c.yiidian.com/" target="_blank">在线工具</a> <a href="http://layui.yiidian.com/" target="_blank">LayUI镜像站点</a> <a href="http://www.yiidian.com/bysj_doc/">毕设文档下载</a> </li> <li> <p>站点信息</p> <a href="/site/about_us/" target="_blank">关于我们</a> <a href="/site/disclaimer/" target="_blank">免责声明</a> <a href="/tags" target="_blank">网站标签</a> </li> </ul> </div> <div class="deanspread"> <p>关注站长公众号：锋哥聊编程</p> <div class="deanweixin"> <img src="/statics/images/ydjc-wx.png"> <p>锋哥聊编程</p> </div> </div> <div class="clear"></div> </div> </div> <div class="deanofficial"> Copyright © 2017-2022 一点教程. All Rights Reserved. <br/>备案号：<a href="https://beian.miit.gov.cn/" target="_blank"><font color="white">粤ICP备17065202号-3</font></a> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5680e7b580ba668dd42e343252481189"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> $(function(){ $.getJSON("http://www.yiidian.com/checklogin", function(data){ if(data.flag){ $('.no-login').hide(); $('.has-login').show(); $('#username').html(""+data.username); }else{ $('.no-login').show(); $('.has-login').hide(); } }); }); </script> </footer> <div class="fixed-btn nav-bar"> <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a> <a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a> <a class="writer" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1014671449&site=qq&menu=yes" style="font-size: 12px;" title="QQ客服"><i class="fa fa-qq" style="font-size: 20px;"></i></a>  <div id="bottom-qrcode" class="modal panel-modal hide fade in"> <h4>微信关注</h4> <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.yiidian.com/statics/images/qrcode.png"></div> </div> </div> <script src="http://www.yiidian.com/statics/js/main.js"></script>  <script src="http://www.yiidian.com/statics/js/amazeui.js"></script> </body> </html>