Question

我正在尝试通过CSS在<div>中插入外部HTML模板，但我不能。首先我尝试使用content，但没有结果。

.overbox {
    display: none;
    position: absolute;     
    background-color: #FFFFFF;
    content: url("../mytemplate.html");     
    padding: 10px;
    top: 25%;
    left: 25%;
    width: auto;
    height: auto;
    z-index:1002;
    overflow: auto; 
}

有什么想法吗？也许用jQuery或Javascript？

Answer 1

CSS适用于向页面添加演示文稿，而非内容。因此，如果您想动态生成内容，我认为您应该使用 JavaScript 。 CSS不会选择这个。

参考： Link

Answer 2

外部模板的内容是否会根据用户的操作而变化（即点击勾选框或选择一个选项）？

模板是否需要多次加载到同一个div中（即每隔几分钟或每次单击一个按钮时）？

如果这些问题的答案都是是，那么您应该使用ajax。以下内容将起作用：

$.ajax({
  url: '../mytemplate.html',
  success:function(data){
    $('.overbox').html(data);
  }
});

请注意，这是简化的，也应该进行错误检查等。有关详细信息，请参阅jquery docs on ajax或“The Perfect jQuery AJAX Request”。

如果上述问题的答案是否那么您应该使用服务器端语言将文件包含在div中，然后再将其发送到客户端

使用PHP的一个例子是：

<div class="overbox">
  <?php include '../mytemplate.html';?>
</div>

Answer 3

在css中使用content的主要目的是插入静态数据:before和:after伪元素，您尝试做的是最适合javascript的任务。在内容中，您可以使用url来指定图像，但无法呈现完整的html内容。

Answer 4

我认为使用javascript，jquery是最好的方法。试试这个功能

   function addDiv() {
    var div = document.createElement('div');
    div.className = 'row';
     div.innerHTML = '<input type="text" name="name" value="" />\
    <input type="text" name="value" value="" />\ 
    <input type="button" value="-" onclick="tempfunction()">';
     document.getElementById('content').appendChild(div);
   }

Answer 5

我不确定您为何选择此方法，但content CSS属性仅适用于伪元素before和after。你的CSS代码应该是这样的。

.overbox:before{
content: url(../mytemplate.html);
position: absolute;     
background-color: #FFFFFF;
padding: 10px;
top: 25%;
left: 25%;
width: auto;
height: auto;
z-index:1002;
overflow: auto; 
 }

注意：您无法在内容属性中使用外部链接。

如何通过CSS在div中插入外部HTML？

5 个答案: