Javascript 如何将html布局文件插入到div中？

所以现在我有一个弹出div（这是一个chrome扩展），现在这个div弹出得很好

我想做的是将我创建的这个布局文件（很多小的设计部分）注入到div中。我试图将innerHTML属性设置为index.html（布局文件）

jQuery（函数（$）{
//当前文档上任何移动事件的鼠标侦听器。
console.log（“已启动”）；//调试以启动
var popupStatus=0；//设置值
document.addEventListener（'mousemove'，函数（e）{
var srceelement=e.srceelement；
//让我们检查底层元素是否是DIV。
如果（srcElement.nodeName=='A'| | srcElement.nodeName=='STRONG'）{
loadPopup（）；
}
否则{
禁用弹出窗口（）；
}
}，对）；
函数loadPopup（）{
var x=document.getElementById（“索引”）；
如果（popupStatus==0）{//如果值为0，则显示弹出窗口
$('', {
id:'封面'，
innerHTML:index.html//有问题的行（使其成为“index.html”不起作用）
}).appendTo（document.documentElement）；
美元("封面").法德托("慢",1),；
popupStatus=1；//并将值设置为1
}   
}
函数disablePopup（）{
如果（popupStatus==1）{//如果值为1，则关闭弹出窗口
$（'封面'）.fadeTo（“慢”，0）；
$（“#封面”）。删除（）；
popupStatus=0；
}
}
});

也许您可以使用ajax获取文件“index.html”的内容

类似这样的片段：

$.get("index.html", function( data ) {
    $.('body').append('<div id="cover">' + data + '</div>');
});

$.get（“index.html”，函数（数据）{
$.（'body'）。追加（''+数据+''）；
});

可以放在有问题的线路上。用任何适合你需要的东西来代替“身体”。这个片段当然可以改进，但现在它应该给你一个想法

我不知道在客户端使用JavaScript读取文件的其他可能性

或者现在我明白了，最好是：

$.get("index.html", function( data ) {
    $('<div/>', {
        id: 'cover',
        innerHTML: data
    }).appendTo(document.documentElement);
});

$.get（“index.html”，函数（数据）{
$('', {
id:'封面'，
innerHTML：数据
}).appendTo（document.documentElement）；
});

在if条件内

我不完全确定您想要做什么，但似乎您想要将它附加到ID为“index”的元素中。然后在最后一行中适当地更改

编辑：

以下是一些细微的变化：

$.get("index.html", function( data ) {
    $('<div/>', {
        id: 'cover',
        html: data // this was making the problem
    }).appendTo(x); // append to the element saved in the variable x
}, "html"); // state explicitly that the payload of data is HTML

$.get（“index.html”，函数（数据）{
$('', {
id:'封面'，
html:data//这就是问题所在
}).appendTo（x）；//追加到变量x中保存的元素
}，“html”）；//明确说明数据的有效负载是HTML

---

这使代码片段对我有用。

要更正您对Chrome扩展的回答：地址不应该是

“index.html”

，而应该是

Chrome.runtime.getURL（“index.html”）

，以确保无论来源如何，路径都正确。谢谢@Xan。答案只是一个解决方案指南，给出了解决问题的方法，而不是一个完整的解决方案。我不知道Chrome扩展的这个问题，所以我学到了一些新的东西。嗯，我试过这个，但是现在div没有出现在allI上。我试过代码，需要稍微修改一下。请查看上面编辑的部分。

$.get("index.html", function( data ) {
    $('<div/>', {
        id: 'cover',
        html: data // this was making the problem
    }).appendTo(x); // append to the element saved in the variable x
}, "html"); // state explicitly that the payload of data is HTML