如何将 html 元素添加到未来的 html 元素（首选 React 或 js）答案

【问题标题】：How to add html elements to a future html element (react or js preferred)如何将 html 元素添加到未来的 html 元素（首选 React 或 js）
【发布时间】：2021-10-10 00:40:50
【问题描述】：

我正在尝试将一些可访问性元素添加到通过第三方加载的某些 html 中，一旦单击第三方应用程序，该元素会生成一些带有锚点的 li，我需要在这些锚点上附加可访问性。我在我的 index.html 中尝试这样的东西作为脚本标签，但它们显然不在负载中，并且使用 SPA 我有点迷失了。

var links = document.querySelectorAll("[class^='table__checkview']");
for (let i = 0; i < links.length; i++) {
  links[i].setAttribute("role","button");
  links[i].setAttribute("tabindex","0");
}

【问题讨论】：

第三方的html是怎么加载的？通过脚本标签？
如何以及可能更重要的是，何时加载第 3 方代码并在 DOM 中可用以附加到？
你可以使用.onload在元素加载时触发的函数
它是通过脚本标签加载的，但直到登录屏幕后才会出现，使用pendo.io。

标签： javascript html reactjs dom

【解决方案1】：

我会使用条件组件和 useState 挂钩。当您的第三方被点击时，状态变为真，如果状态为真，那么您的 UI 将显示您想要的元素。 https://reactjs.org/docs/conditional-rendering.html

【讨论】：