gpt4 book ai didi

javascript - 如何使用 vanilla JavaScript 将 HTML 元素插入到 Angular 应用程序网页中?

转载 作者:行者123 更新时间:2023-11-30 21:03:40 25 4
gpt4 key购买 nike

我已经创建了一个外部/公共(public) JavaScript 库。

当我通过在 <HEAD> 中包含脚本在 Angular 1.x 网络应用程序上对其进行测试时,我发现它通过让点击无所事事来破坏 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。

最佳答案

用我的实现回答我自己的问题。所有功劳都归功于@Cbroe,他为我指明了正确的方向。

基本上,您不能将 document.body.innerHTML 与 Angular 一起使用,所以我最终使用的是:

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

关于javascript - 如何使用 vanilla JavaScript 将 HTML 元素插入到 Angular 应用程序网页中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46859468/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com