JavaScript 递归将列表从 XML 格式化为 HTML答案

【问题标题】：JavaScript Recursion to format lists from XML to HTMLJavaScript 递归将列表从 XML 格式化为 HTML
【发布时间】：2013-04-25 02:14:03
【问题描述】：

我有一个练习，它要求我使用递归将 XML 数据输出到 HTML 列表标记中。可耻地承认我在数学方面的不足，我希望有人向我展示如何使用 JavaScript 对 XML 的“节点结构”实现递归逻辑。

结果如下：JSFiddle

编辑添加了示例 XML 以完善该主题并删除了不需要的代码。用于创建递归函数的 XML：

<ddm>
           <menu0 submenu="true"><name>Welcome</name>
                     <menu1>Home Page</menu1>
                     <menu1>Bulletin</menu1>
                </menu0>
                <menu0 submenu="true"><name>Members\' Area</name>
                    <menu1>Constitution &amp; Bylaws</menu1>
                    <menu1 submenu="true"><name>AGM Minutes</name>
                        <menu2>2012</menu2>
                        <menu2>2011</menu2>
                    </menu1>
                </menu0>
                <menu0>About</menu0>
            </ddm>

<ddm>

【问题讨论】：

标签有孩子，那些孩子可以有自己的孩子，也可以有自己的孩子……看到递归了吗？如果没有，那么是时候阅读递归的定义了 ;-)。
我正在尝试atm，我会尽快发布我的内容

标签： javascript html xml recursion format

【解决方案1】：

您使用顶级元素调用一次递归函数。每个子元素将简单地调用相同的函数。当你到达底部时，你会停下来，然后一切都会重新传递。

这应该让您开始（您的 xml 示例）。

演示：

输出：

脚本：

document.getElementById( 'parse' ).addEventListener( 'click', function () {
    var xml = '<ddm>'
                + '<menu0 submenu="true"><name>Welcome</name>'
                    + '<menu1>Home Page</menu1>'
                    + '<menu1>Bulletin</menu1>'
                + '</menu0>'
                + '<menu0 submenu="true"><name>Members\' Area</name>'
                    + '<menu1>Constitution &amp; Bylaws</menu1>'
                    + '<menu1 submenu="true"><name>AGM Minutes</name>'
                        + '<menu2>2012</menu2>'
                        + '<menu2>2011</menu2>'
                    + '</menu1>'
                + '</menu0>'
                + '<menu0>About</menu0>'
            + '</ddm>',
        xmlDoc = new DOMParser().parseFromString( xml, 'text/xml' ),
        html = nodeMarkup( xmlDoc.documentElement );
    document.getElementById( 'result' ).innerHTML = html;
} );

function nodeMarkup( node ){
    if( node.childNodes.length ) {
        var list = '', header = '';
        for( var index = 0; index < node.childNodes.length; index++ ) {
            if( node.childNodes[index].tagName == 'name' ) {
                header = node.childNodes[index].textContent;
            } else {
                list += nodeMarkup( node.childNodes[index] );
            };
        };
        return node.hasAttribute( 'submenu' ) 
            ? '<li>' + header + '<ul>' + list + '</ul></li>'
            : list;
    } else {
        return '<li>' + node.textContent + '</li>';
    };  
};

HTML：

<input type="button" id="parse" value="Parse" />
<ul id="result"></ul>

CSS：

#result {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

【讨论】：