可以使用递归函数将js对象解析为有效的html标记吗？

const data = {
  name: "Root",
  children: [
    { name: "Child1", children: [] },
    { name: "Child2", children: [{ name: "Grandchild", children: [] }] }
  ]
};

function createHtmlElement(obj) {
  let element = `<li>${obj.name}`;

  if (obj.children && obj.children.length > 0) {
    element += "<ul>";
    obj.children.forEach(child => {
      element += createHtmlElement(child);
    });
    element += "</ul>";
  }

  element += "</li>";
  return element;
}

const htmlOutput = `<ul>${createHtmlElement(data)}</ul>`;
console.log(htmlOutput);

<ul>
  <li>Root
    <ul>
      <li>Child1</li>
      <li>Child2
        <ul>
          <li>Grandchild</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>