在注入的 HTML 中添加元素的正确方法是什么？

Question

我们正在逐步淘汰我们网站上的自定义表单（在 React 中创建），并用 Microsoft Dynamics 365 生成的表单取而代之。

这些表单通过脚本创建的 React 占位符组件注入，以加载 js 包并通过下面的代码加载到 DOM 中，因为它们是在 Dynamics 365 中创建的，结构在表单构建器中处理。

React.createElement(d365mktforms.FormPlaceholder, {
            formId: '14299349-****-****-****-*******cde50335',
            formApiBaseUrl: 'https://public-apj.mkt.dynamics.com/api/v1.0/orgs/****c3d6-****-****-a87b-5f737234ce93/landingpageforms',
            formUrl: 'https://assets-apj.mkt.dynamics.com/****3d6-****-****-a87b-5f737234****/digitalassets/forms/1429****-****-****-8847-000d3aa0****',
        }, 'contactForm')

我们希望保留当前用于自定义表单的自定义验证和样式。这包括为所有电子邮件字段添加事件侦听器并发出 API 验证请求，并在字段下方的标签中显示验证消息，如下所示：

Microsoft 生成的表单中不存在这些标签，因此我需要即时或在“表单加载”事件中创建它们。我可以使用 JavaScript 和修改 DOM 很容易地做到这一点，但是我知道这违背了 React 的目的。

是否有正确的方法来获取创建 React 元素并将它们添加到注入的 HTML 元素中？

Answer 1

第 1 步：将 DOM 容器添加到 HTML。首先，打开您要更改的 HTML 页面。 ... 第 2 步：添加脚本标签或 React 标签。接下来，您必须在结束标记之前向 HTML 页面添加三个标记。 ... 第 3 步：创建 React 组件

这里有四种方法可以参考链接向您解释更多

https://gomakethings.com/four-different-ways-to-inject-text-and-html-into-an-element-with-vanilla-javascript/

还有另一种方式

var html = '播放'; html += '静音'; html += ''; html += '0:00'; html += '0:00';