Javascript 分层创建DOM

我有一个键和值的列表，我打算基于这些信息创建一个xml

我的名单申报表：

1 person
2 information
3 name
3 surname
2 address
3 street
3 country

我想生成一个xml：

<xml>
    <person>
        <information>
            <name></name>
            <surname></surname>
        </information>
        <address>
            <street></street>
            <country></country>
        </address>
    </person>
</xml>

我有一个元素列表，遍历这些元素将按层次结构创建xml文档。我已经有了这个代码：

var elements = document.getElementsByClassName('elements');
var xml = document.createElement('xml');

for (var i = 0; i < elements.length; i++) {
    var key = elements[i].getAttribute('data-key');
    var value = elements[i].getAttribute('data-value');

    console.log(key +' -> '+ value);

    // HERE: create new elements appendChild "var xml"
}

var elements=document.getElementsByClassName（'elements'）；
var xml=document.createElement（'xml'）；
对于（var i=0；i'+值）；
//此处：创建新元素并添加子“var xml”
}

注意：这是未经测试的，我需要离开。但是，这应该给你一个评论的起点

var elements = document.getElementsByClassName('elements');
var xml = document.createElement('xml');
var curElem = xml;
var curDepth = 0;

for (var i = 0; i < elements.length; i++) {
    var key = elements[i].getAttribute('data-key');
    var value = elements[i].getAttribute('data-value');

    console.log(key +' -> '+ value);

    // HERE: create new elements appendChild "var xml"

    // Create the new element
    var elem = document.createElement(value);

    // If we are further down the hierarchy, simply add the child
    if (key > curDepth) { 
        curElem.appendChild(elem);
    } else if (key == curDepth) {
        // We are a sibling of our current containing element
        // so simply add to the parent 
        curElem.parentElement.appendChild(elem);
        curElem = elem;
    } else if (key < curDepth) {
        // We are at some point ABOVE our current element
        // so start walking UP until we reach the level indicated
        // and then add the element to the parent
        while (curDepth >= key) {
            curElem = curElem.parentElement;
            curDepth--;
        }
        curElem.parentElement.appendChild(elem);
    }
    curElem = elem;
    curDepth = key;
}

var elements=document.getElementsByClassName（'elements'）；
var xml=document.createElement（'xml'）；
var curElem=xml；
var-curDepth=0；
对于（var i=0；i'+值）；
//此处：创建新元素并添加子“var xml”
//创建新元素
var elem=document.createElement（值）；
//如果我们更深入层次结构，只需添加子级
如果（键>curDepth）{
附肢儿童（elem）；
}else if（键==curDepth）{
//我们是当前包含元素的兄弟
//因此，只需添加到父级
curElem.parentElement.appendChild（elem）；
curElem=elem；
}否则如果（键=键）{
curElem=curElem.parentElement；
凝乳深度--；
}
curElem.parentElement.appendChild（elem）；
}
curElem=elem；
curDepth=键；
}

注意：这是未经测试的，我需要离开。但是，这应该给你一个评论的起点

var elements = document.getElementsByClassName('elements');
var xml = document.createElement('xml');
var curElem = xml;
var curDepth = 0;

for (var i = 0; i < elements.length; i++) {
    var key = elements[i].getAttribute('data-key');
    var value = elements[i].getAttribute('data-value');

    console.log(key +' -> '+ value);

    // HERE: create new elements appendChild "var xml"

    // Create the new element
    var elem = document.createElement(value);

    // If we are further down the hierarchy, simply add the child
    if (key > curDepth) { 
        curElem.appendChild(elem);
    } else if (key == curDepth) {
        // We are a sibling of our current containing element
        // so simply add to the parent 
        curElem.parentElement.appendChild(elem);
        curElem = elem;
    } else if (key < curDepth) {
        // We are at some point ABOVE our current element
        // so start walking UP until we reach the level indicated
        // and then add the element to the parent
        while (curDepth >= key) {
            curElem = curElem.parentElement;
            curDepth--;
        }
        curElem.parentElement.appendChild(elem);
    }
    curElem = elem;
    curDepth = key;
}

var elements=document.getElementsByClassName（'elements'）；
var xml=document.createElement（'xml'）；
var curElem=xml；
var-curDepth=0；
对于（var i=0；i'+值）；
//此处：创建新元素并添加子“var xml”
//创建新元素
var elem=document.createElement（值）；
//如果我们更深入层次结构，只需添加子级
如果（键>curDepth）{
附肢儿童（elem）；
}else if（键==curDepth）{
//我们是当前包含元素的兄弟
//因此，只需添加到父级
curElem.parentElement.appendChild（elem）；
curElem=elem；
}否则如果（键=键）{
curElem=curElem.parentElement；
凝乳深度--；
}
curElem.parentElement.appendChild（elem）；
}
curElem=elem；
curDepth=键；
}

与Forty3的答案非常相似，但更加简洁，使用XML文档，而不是HTML文档

请注意，如果文档是HTML文档，则document.createElement会将标记名更改为小写，而如果是XML文档，则保留标记大小写。此外，在HTML文档中，它依赖于对自定义和未知标记名的支持，而这些标记名可能不可用，因此最好使用XML文档

我已经建立了一个数据源，它似乎来自文档，所以希望它合理地近似于您正在使用的内容。我在这个层面上做了一些最小的验证，应该对输入进行更多的验证，以确保它符合一些标准化的格式

函数buildDoc（）{
//创建用于创建元素的XML文档
var doc=document.implementation.createDocument（null，null，null）；
var data=document.getElementsByClassName（'elements'）；
var root=doc.createElement（'xml'）；
var parent=根；
风险值水平=0；
变量节点，标记名；
对于（var i=0，iLen=data.length；i与Forty3的答案非常相似，但更简洁，使用XML文档，而不是HTML文档

请注意，如果文档是HTML文档，则document.createElement会将标记名更改为小写，而如果是XML文档，则保留标记大小写。此外，在HTML文档中，它依赖于对自定义和未知标记名的支持，这些标记名可能不可用，因此最好使用XML文档

我已经建立了一个数据源，它似乎来自文档，所以希望它合理地近似于您正在使用的内容。我已经在级别上进行了一些最小验证，应该对输入进行更多验证，以确保它符合一些标准化格式


函数buildDoc（）{
//创建用于创建元素的XML文档
var doc=document.implementation.createDocument（null，null，null）；
var data=document.getElementsByClassName（'elements'）；
var root=doc.createElement（'xml'）；
var parent=根；
风险值水平=0；
变量节点，标记名；
对于（var i=0，iLen=data.length；i关于创建XML文档，其中肯定有一个是重复的？不清楚您是要创建XML字符串还是XML文档。我在发布问题之前进行了研究，但没有结果处理相同的问题。关于创建XML文档，肯定有一个是重复的？不是清楚是要创建XML字符串还是XML文档。我在发布问题a之前做了研究