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

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不是为此选择的。

参考： 链接

Answer 2

外部模板的内容是否根据用户的操作（即单击了复选框或选择了选项）而发生了变化？

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

如果答案要么这些问题是肯定的 ，那么你应该使用AJAX。 遵循以下方法行之有效：

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

请注意，这是简化的，还应该进行错误检查等。有关更多信息，请参见ajax上的jquery文档或“ 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; 
 }

注意：您不能在content属性中使用外部链接。