/ / Jak mogę wykorzystać waniliowy JavaScript do wstawiania elementów HTML na stronę aplikacji Angular? - javascript, html, angularjs

Jak mogę użyć wanilii JavaScript do wstawienia elementów HTML na stronę aplikacji Angular? - javascript, html, angularjs

Stworzyłem zewnętrzną / publiczną bibliotekę JavaScript.

Testuję go w aplikacji internetowej Angular 1.x, dołączając skrypt do <HEAD>, Stwierdziłem, że łamie aplikację Angular, ponieważ kliknięcia nic nie robią.

Po godzinach debugowania przestrzeni nazw, właściwości,i funkcje; W końcu znalazłem winowajcę, gdy wstawiam elementy HTML na stronę. Moja biblioteka JS obecnie używa tego kodu do wstawienia HTML na stronę.

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];
};

Jednym z powodów, dla których dodaję elementy HTML na dole document.body Jest tak dlatego, że ustawiłem te elementy, aby miały najwyższy indeks Z na stronie, więc wszelkie konkurujące elementy będą generować indeks Z do moich wstawionych elementów HTML.

Odpowiedzi:

1 dla odpowiedzi № 1

Odpowiadając na moje własne pytanie z moim wdrożeniem. Wszystkie zasługi należą się @Cbroe za wskazanie mi właściwego kierunku.

Zasadniczo nie możesz użyć document.body.innerHTML z Angularem, więc tutaj użyłem zamiast tego:

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);
};