使用jquery/javascript将XML转换为HTML

我有一些

XML

，需要在

div

中显示为文本。
我们可以将这个

XML

转换成如下格式吗

<root>
<field>
  <label>Have you invested before</label>
  <value>No</value>
</field>
<field>
  <label>Are you looking to invest in the next 6 months</label>
  <value>Maybe</value>
</field>
<field>
  <label>What investments are you interested in</label>
  <value>Carbon Credits, Green Investments</value>
</field>
<field>
  <label>How much are you looking to invest</label>
  <value>£50,000 -  £100,000</value>
</field>
</root>

你以前投资过吗
不
您是否希望在未来6个月内进行投资
大概
你对什么投资感兴趣
碳信用、绿色投资
你打算投资多少
£50,000 -  £100,000

输出应如下所示：

您以前是否投资过：否
您是否希望在未来6个月内进行投资：可能
您对哪些投资感兴趣：碳信用、绿色投资
您希望投资多少：50000-100000英镑

这是否可以使用Jquery/javascript实现

它应该像下面的HTML一样呈现

<div class="how-to">
<div class="how-text">
    <h3>Your Requirements</h3>
        <ul class="requirements">         
<li><label class="field-l">Have you invested before:</label> <span>No</span></li>         
<li><label class="field-l">Are you looking to Invest in the next 6 months:
</label>      <span>Maybe</span></li>         
<li><label class="field-l">What Investments are you interested in:</label> 
<span>Carbon  Credits,Green Investments</span></li>
 <li><label class="field-l">How much are you looking to invest:</label>
  <span>£50,000 -  £100,000</span></li>
      <li class="link-pad"><a href="index.html" class="requirements">
     Change  your requirements</a></li>
    </ul>
<div class="clear"></div>
 </div>
  </div>

你的要求

您以前投资过吗：没有
您是否希望在未来6个月内进行投资：
也许
您对哪些投资感兴趣：
碳信用、绿色投资
您希望投资多少：
50000-100000英镑

步骤1：验证xml 您的xml无效。您可以检查它是否有效，例如，在。有很多，我链接的这个只是一个例子

对于这个答案，我想我们有一些xml，如下所示

你以前投资过吗
不
您是否希望在未来6个月内进行投资
大概
你对什么投资感兴趣
碳信用、绿色投资
你打算投资多少
£50,000 -  £100,000

步骤2：获取xml，可能通过ajax 我相信这是显而易见的，但无论如何我会在这里包括

$.get（“/url\u的\u xml\u资源”）
.完成（功能（数据）{
//如果请求成功，则执行此函数
})
.fail（函数（）{
//如果请求失败，则执行此函数
})
;

步骤3：解析xml 您可以使用jQuery解析它，并将原始数据转换为XML文档

$.get（“/url\u的\u xml\u资源”）
.完成（功能（数据）{
//解析xml
data=$.parseXML（数据）；
//
//对解析后的数据执行任何操作
})
.fail（函数（）{
警惕（“出了什么事！”）；
})
;

步骤4：播放数据 现在我们有了一个xml文档。下面的snipnet假设我们在HTML布局中有一个定义列表，

标记，并且支持在解析数据后执行，如前一步所示

//首先我们查询HTML文档以获取list元素
//并将其保存以备日后使用
变量列表=$（'dl'）；
//数据现在是xml文档，所以我们查询它。。。
$（数据）
//并搜索所有元素
.find（'字段'）
//现在我们可以互相玩了
.每个（功能（索引、元素）{
//例如，我们查询并存储字段
变量字段=$（元素）
//获取我们想要的值
var label=field.find（'label'）.text（）
var value=field.find（'value'）.text（）
//并在之前存储的元素中附加一些html
列表
.append（“”+label+’：“”）
.附加（“”+值+“”）
;
})
;

结论 是你想用的。它的可链接性使得穿越DOM就像切割黄油。我希望这个答案对你有用

---

作为传统参考，请参阅，但是不管这个字符串是什么，我正在使用一些动态控件生成它，它是某种Jquery表单生成器..借助它，我可以将它呈现为HTML控件..但是我需要将它显示为文本以及控件..我不能这样做..这就是我请求帮助的原因..目前我没有代码..你的XML不好形成。标记中不能有空格，否则它们是属性，需要有值。@MayankPathak我给你写了一个例子。正如Austin所说，您的问题的主要问题是它不是有效的xml。请编辑该问题以备将来参考。请根据您的答案进行编辑。；）谢谢你给这个答案加些肉？哇。这是我见过的最完整的答案之一（不包括乔恩·斯基特的答案）。好多好多了。写得好！谢谢laconbass..我用这种方式生成了XML，它对我很有用..谢谢伙计...）