Функция без вызова добавлена ​​с document.getElementById ('someId'). AppendChild ()

Question

Я получаю часть HTML-кода из API, хочу сделать рендеринг в 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>

, поэтому не в состоянии отрисовать форму. Кто-нибудь есть идея, пожалуйста, помогите мне.

Answer 1

Если у вас есть HTML-разметка в строке, используйте innerHTML

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

---

Обновлено

Если он добавляет разметку, но ваш formio компонент не работает? ... тогда вот пара ссылок, которые могут быть тем, что вы ищете:

• Динамически добавить компонент в угловой 2/4
• AngularJS: динамически добавлять компонент из списка
• Как динамически добавлять innerHTML с угловыми 2 компонентами
• https://angular.io/guide/dynamic-component-loader