优化递归脚本，将SVG元素批量添加到DOM中

问：

我希望动态地向 DOM 批量添加大量 SVG 元素。

从我所读到的内容来看，动态添加 SVG 元素比使用 SVG 'use' 语句创建多个实例需要更少的处理。

我写了下面的剧本。我是否错过了任何更优化的方法？

或者这种结构可以用更少的迭代来实现吗？

我必须能够以每个元素的直接父元素为目标，以便将其添加到 DOM 结构中。

下面的脚本旨在为数组定义的任意数量的层在每个元素与其下方级别的每个元素之间创建一对多关系。

`console.clear();

newElement = [];

newElement[0] = ["g", "g"];
newElement[1] = ["g", "g", "g"];
newElement[2] = ["g", "g", "g"];
newElement[3] = ["path", "polygon", "path", "polygon"];

coord = [];
Tree(-1, 0);
console.table(coord);

function Tree(f, i) {
  (origf = f),
    (origi = i),
    (tracki = []),
    (trackf = origf + 1),
    (tracki[trackf] = 0);

  coord.push([trackf, tracki[trackf]]);

  while (AddDesc() != "done") {
    AddDesc();
  }
}

function AddDesc() {
  if (trackf == newElement.length - 1) {
    for (
      tracki[trackf] = 1;
      tracki[trackf] < newElement[trackf].length;
      tracki[trackf]++
    ) {
      coord.push([trackf, tracki[trackf]]);
    }
    trackf--;

    for (
      ;
      trackf > origf && tracki[trackf] == newElement[trackf].length - 1;
      trackf--
    ) {}
    if (trackf == origf) {
      return "done";
    }
    tracki[trackf]++;
    coord.push([trackf, tracki[trackf]]);
  }

  if (trackf < newElement.length - 1) {
    trackf = trackf + 1;
    tracki[trackf] = 0;
    coord.push([trackf, tracki[trackf]]);
  }
}`

这是我的第一次尝试。