document.CreateElement 实现答案

【问题标题】：document.CreateElement Implementationdocument.CreateElement 实现
【发布时间】：2014-02-28 18:33:29
【问题描述】：

我需要一些关于 JavaScript 的帮助。当我在使用 JavaScript 使用 XML 时，我遇到了很多问题。所以我想在我的程序中使用document.createElement("ul") document.createElement("ul") 而不是var html = "<li>" + node.nodeName;。因为我需要给出适当的样式并且需要附加一些事件。所以我需要一些帮助。我附上了我正在使用的程序的现场小提琴。

Live Fiddle

function generate(node) {
    if (node.nodeType != 1) return "";
    var html = "<li>" + node.nodeName;
    var htmlForChildNodes = "";
    for (var i = 0; i < node.childNodes.length; i++) {
        htmlForChildNodes += generate(node.childNodes[i]);
    }
    if (htmlForChildNodes) {
        html += "<ul>" + htmlForChildNodes + "</ul>";
    }
    html += "</li>";
    return html;
}

谢谢

【问题讨论】：

标签： javascript html xml xml-parsing

【解决方案1】：

不确定你想要什么，但这个例子使用createElement：

function generate(node) {
    if (node.nodeType != 1) return "";
    var li = document.createElement('li');
    var span = document.createElement('span');
    span.innerHTML = node.nodeName;
    span.addEventListener("click", function(event) {
        event.target.parentNode.classList.toggle("selected");
    });    
    li.appendChild(span);

    var ul = document.createElement('ul');
    for (var i = 0; i < node.childNodes.length; i++) {
        var r = generate(node.childNodes[i]); 
        if(r!==""){
            ul.appendChild(r);
        }
    }
    li.appendChild(ul);   
    return li;
}

if (window.DOMParser) {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(txt, "text/xml");
} else { // Internet Explorer
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.loadXML(txt);
}

var masterUL = document.createElement('ul');
masterUL.appendChild(generate(xmlDoc.documentElement));
document.body.appendChild(masterUL);

FIDDLE

【讨论】：