如何使用 vanilla JavaScript 將 HTML 元素插入到 Angular 應用程序網頁中？

Question

我創建了一個外部/公共 JavaScript 庫。

當我通過在<HEAD>包含腳本在 Angular 1.x Web 應用程序上測試它時，我發現它通過使點擊什么都不做而破壞了 Angular 應用程序。

經過數小時的調試命名空間、屬性和函數； 我終於找到了罪魁禍首是當我將 HTML 元素插入網頁時。 我的 JS 庫目前正在使用此代碼將 HTML 插入網頁。 我將如何讓它支持 Angular 應用程序（或一般的 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-index，因此任何競爭元素都會為我插入的 HTML 元素生成 z-index。

Answer 1

用我的實現回答我自己的問題。 所有功勞都歸功於@Cbroe 為我指明了正確的方向。

基本上，你不能在 Angular 中使用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);
};

如何使用 vanilla JavaScript 將 HTML 元素插入到 Angular 應用程序網頁中？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-21 02:48:10

如何使用 vanilla JavaScript 將 HTML 元素插入到 Angular 應用程序網頁中？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-21 02:48:10

解決方案1
1 已采納 2017-10-21 02:48:10