未调用的函数添加了document.getElementById（'someId'）。appendChild（）

Question

I am getting fraction part of HTML code from api, want to render into DOM like below...

 // 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> 

so unable to render formio. Anyone have idea please help me.

Answer 1

When you have HTML markup in a string, use innerHTML

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

---

Updated

If it does add the markup but your formio component doesn't work? ... then here are couple links that might be what you are looking for:

• 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