/ / Як я можу використовувати ванільний JavaScript для вставки елементів HTML у веб-сторінку кутового застосування? - javascript, html, angularjs

Як я можу використовувати ванільний JavaScript для вставки HTML-елементів на веб-сторінку кутового застосування? - javascript, html, angularjs

Я створив бібліотеку зовнішніх / публічних JavaScript.

Оскільки я тестую його в веб-додатку Angular 1.x, включивши в нього сценарій <HEAD>, Я виявив, що він порушує кутовий додаток, зробивши кліки нічого не роблять.

Після годин налагодження імен, властивостей,і функції; Я нарешті знайшов винуватця, коли я вставляю HTML-елементи на веб-сторінку. В даний час у моїй бібліотеці JS використовується цей код, щоб вставити HTML на веб-сторінку. Як я маю намір підтримати кутові додатки (або SPA взагалі)?

var HTML_ELEMENTS = ["<h1>Hi</h1>", "<div>Hello again.</div>"];

for (var i = 0; i < HTML_ELEMENTS.length; i++) {
document.body.innerHTML += HTML_ELEMENTS[i];
};

Однією з причин я додаю HTML-елементи донизу document.body це тому, що я встановив ці елементи на найвищому z-індексі на сторінці, тому будь-які конкуруючі елементи дадуть z-індекс моїм вставленим елементам HTML.

Відповіді:

1 для відповіді № 1

Відповідаю на моє власне питання з моєю реалізацією. Весь кредит йде @ Cbroe, щоб вказати мені в правильному напрямку.

В принципі, ви не можете використовувати document.body.innerHTML з кутовим, так ось що я закінчив використовувати замість цього:

var HTML_ELEMENTS = ["<h1>Hi</h1>", "<div>Hello again.</div>"];

for (var i = 0; i < HTML_ELEMENTS.length; i++) {
var child = document.createElement("div");
child.innerHTML = HTML_ELEMENTS[i];
child = child.firstChild;
document.body.appendChild(child);
};