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

【问题标题】：How to insert an external HTML in a div by CSS?如何通过 CSS 在 div 中插入外部 HTML？
【发布时间】：2015-08-22 16:20:03
【问题描述】：

我正在尝试通过 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？

【问题讨论】：

您不能使用 CSS 检索外部内容。您肯定需要使用 JavaScript，或者可能是服务器端包含，具体取决于您从哪里检索内容。
@RoryMcCrossan，你确定吗？这表明否则developer.mozilla.org/en-US/docs/Web/CSS/content
@AmmarCSE 如果您指的是您可以提供给content 的 URL，该 URL 仅适用于图像，而不适用于 HTML。
This 说content 只支持文本而不支持html。我建议在这里使用 jQuery load()。
@RoryMcCrossan，但在我提供的链接中，使用 .html 文件作为示例？

标签： javascript jquery html css

【解决方案1】：

CSS 用于向页面添加演示文稿，而不是内容。因此我觉得如果你想动态生成内容，你应该使用JavaScript。 CSS 不适合这个。

参考：Link

【讨论】：

好的！现在我知道不可能在“内容”中添加 html

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

他不能使用外部内容，但他可以使用内容属性调用本地 URI，而不仅仅是图像，
“本地 URI”到底是什么意思？

【解决方案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);
   }

【讨论】：

如果加载外部 html 文件，使用 ajax 可能会更好
我看到这个函数试图添加一个 div，但其目的是在以前存在的 div 中插入一个外部 html

【解决方案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; 
 }

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

【讨论】：