如何在 Marko 中动态创建 HTML 组件？答案

【问题标题】：How can I dynamically create HTML components in Marko?如何在 Marko 中动态创建 HTML 组件？
【发布时间】：2021-08-25 20:59:55
【问题描述】：

我想在用户每次单击按钮时创建新的 Marko 组件 — 通过调用类似 JavaScript DOM 方法 document.createElement("tag") 的方法。如何在 Marko 中做到这一点，不仅使用普通 HTML 标签，还使用自定义 Marko 标签？

我尝试了什么：document.createElement("custom-marko-component")

预期行为：Marko 引擎编译自定义组件的新实例。

实际行为：浏览器生成一个无用的新<custom-marko-component></custom-marko-component>。

【问题讨论】：

标签： dom marko

【解决方案1】：

使用 Marko 的渲染函数（文档：https://markojs.com/docs/rendering/）：

例子：

// Create the custom component, like document.createElement() but asynchronous.
// Import `./custom-marko-component.marko`
var customComponent = require("./custom-marko-component"); 
var resultPromise = customComponent.render({});

// Insert the custom component into the webpage.
resultPromise.then(result => {
  result.appendTo(document.body);
});

【讨论】：