javascript - 不调用添加了 document.getElementById ('someId' ).appendChild() 的函数

Question

我正在从 api 获取一小部分 HTML 代码，想要像下面那样呈现到 DOM 中......

// getting template from backend.
let template1 = "<div class='well'><formio src='example/text.json'></formio>"; //appearing into dom, but not loading form.

// second way
let template2 = "<formio [src]='getUrl()'></formio></div>";
// calling getUrl from component.ts file.

// attaching template into DOM using appendChild() method..
const fragment = document.createRange().createContextualFragment(template);
document.getElementById('landingTemplate').appendChild(fragment);

getUrl() {
   return 'example/text.json';
}
// getUrl() not calling from HTML.

<div id="landingTemplate"></div>

所以无法渲染 formio。任何人有想法请帮助我。

Answer 1

当字符串中有 HTML 标记时，使用 innerHTML

document.getElementById('landingTemplate').innerHTML = template;

---

已更新

如果它确实添加了标记但您的 formio 组件不起作用？ ... 那么这里有几个链接可能是您正在寻找的内容:

• > Dynamically add Component in angular 2/4
• > AngularJS: Dynamically add component from list
• > How to dynamically add innerHTML with angular 2 components
• > https://angular.io/guide/dynamic-component-loader