Question

我正在寻找一种方法来解析XML文档，然后根据文档在HTML页面中创建相应的DIV。经过简短的谷歌搜索后，我还没有找到开箱即用的方式。我想知道是否有人知道一个相对简单的方法来实现这一目标？例如，采用以下XML示例

<parent>
  <node1>Some Value1</node1>
  <node2>Some Value2</node2>
  <node3>
    <childNode1>Some Child Value1</childNode1>
    <childNode2>Some Child Value2</childNode2>
  </node3>
</parent>

我想解析这个并生成以下

<div id="parent">
  <div id="node1">Some Value1</div>
  <div id="node2">Some Value2</div>

  <div id="node3">
    <div id="childNode1">Some Child Value1</div>
    <div id="childNode2">Some Child Value2</div>
  </div>
</div>

Answer 1

你可以做这样的事情

var xmlString = '<parent>\
  <node1>Some Value1</node1>\
  <node2>Some Value2</node2>\
  <node3>\
    <childNode1>Some Child Value1</childNode1>\
    <childNode2>Some Child Value2</childNode2>\
  </node3>\
</parent>'

$(document).ready(function() {
    var xml = $.parseXML(xmlString);

    xml2html($(':root', xml), $('body'));
});

function xml2html(xml, container) {
    var tagName = $(xml).get(0).tagName;
    var div = $(document.createElement('div'))
                    .attr({ id: tagName })
                    .appendTo(container)

    if($(xml).children().length == 0) {
        div.text($(xml).text());
    }
    else {
        $(xml).children().each(function(index, node) {
            xml2html(node, div);
        });
    }
}

请参阅小提琴示例here

Answer 2

看看jQuery api。

https://api.jquery.com/jQuery.parseXML/

我会从一个空的div元素（带有一个id）开始，这样你就可以将新的html插入到该位置。

    <div id="parent"></div>

另一种选择是将整个xml作为字符串加载到javascript中并手动解析出来。考虑到XML中的干净/统一格式，它很麻烦但可行。

解析XML和创建DIV的JQuery

2 个答案: