如何在客户端从灵活的xml生成html中的树视图

// 假设我们有一个XML字符串
const xmlString = `
<tree>
  <node id="1" label="Node 1">
    <node id="2" label="Node 2">
      <node id="3" label="Node 3" />
    </node>
    <node id="4" label="Node 4" />
  </node>
</tree>
`;

// 解析XML字符串为DOM文档
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

// 遍历XML节点并创建HTML元素
function createHtmlTree(xmlNode, parentElement) {
  const nodeElement = document.createElement("div");
  nodeElement.textContent = xmlNode.getAttribute("label");
  nodeElement.classList.add("node");
  parentElement.appendChild(nodeElement);

  const children = xmlNode.children;
  for (let i = 0; i< children.length; i++) {
    const childNode = children[i];
    if (childNode.nodeName === "node") {
      createHtmlTree(childNode, nodeElement);
    }
  }
}

// 创建树视图
const treeContainer = document.getElementById("tree-container");
createHtmlTree(xmlDoc.documentElement, treeContainer);