我有一个键和值列表,我打算根据此信息创建一个 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"
}
最佳答案
与 Forty3 的答案非常相似,但更简洁,并且使用 XML 文档,而不是 HTML 文档。
请注意,如果 document 是 HTML 文档,则 document.createElement 会将标记名更改为小写,而如果它是 XML 文档,则保留标记大小写。此外,在 HTML 文档中,它依赖于对自定义和未知标记名的支持,而这些标记名可能不可用,因此最好使用 XML 文档。
我已经编写了一个数据源,它似乎来自文档,因此希望它能够合理地近似您正在使用的内容。我已经在关卡上进行了一些最低限度的验证,应该对输入进行更多验证以确保其符合某种标准化格式。
function buildDoc() {
// Create an XML document to use to create the elements
var doc = document.implementation.createDocument(null, null, null);
var data = document.getElementsByClassName('elements');
var root = doc.createElement('xml');
var parent = root;
var level = 0;
var node, tagname;
for (var i=0, iLen=data.length; i<iLen; i++) {
dataNode = data[i];
node = doc.createElement(dataNode.dataset.value);
nodeLevel = dataNode.dataset.key;
// Can only add nodes at level 1 or higher
if (nodeLevel <= 0) {
console.log('Level ' + nodeLevel + ' is invalid. Can only create nodes at level 1 or higher');
return;
}
// If node at same level, is sibling of current parent
// If node at lower level, go back levels and parents to same level
// Append node, then make node the parent
if (nodeLevel <= level) {
while (nodeLevel < level) {
parent = parent.parentNode;
--level;
}
parent = parent.parentNode.appendChild(node);
// If node at higher level, is child of current parent
// Next node might higher again, so set parent to node
} else if (nodeLevel > level){
parent = parent.appendChild(node);
level = nodeLevel;
}
}
// Return the root
return root;
}
window.onload = function() {
console.log(buildDoc().outerHTML);
};
<div>
<span class="elements" data-key="1" data-value="Person">1 person</span><br>
<span class="elements" data-key="2" data-value="information">2 information</span><br>
<span class="elements" data-key="3" data-value="name">3 name</span><br>
<span class="elements" data-key="3" data-value="surname">3 surname</span><br>
<span class="elements" data-key="2" data-value="address">2 address</span><br>
<span class="elements" data-key="3" data-value="street">3 street</span><br>
<span class="elements" data-key="3" data-value="country">3 country</span><br>
<span class="elements" data-key="2" data-value="address">2 address</span><br>
<span class="elements" data-key="3" data-value="street">3 street</span><br>
<span class="elements" data-key="3" data-value="country">3 country</span><br>
</div>
关于javascript - 分层创建 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43174918/