Firebug比我在源代码中看到的更多<div>

Question

我有一个很大的HTML页面，其中包含许多CSS文件。

当我尝试使用Firebug调试该HTML页面时，它显示的内容比我在源代码中看到的更多<div>。此外，还有一些标记为灰色。在图片中，带有绿色下划线的是源代码中不存在的元素。

为什么？是因为CSS文件是＆＃34;包括＆＃34;那些＆＃34;新＆＃34; <div> S'

我从未见过CSS文件可以将<div>或<a>插入HTML页面。

使用记事本编辑的源代码：

Answer 1

Firebug不会更改您的HTML，CSS也不会添加<div>（尽管它可以创建pseudo-elements，例如::before）。

如果HTML输出中未包含其他元素，则必须通过页面上的JavaScript动态创建它们。

Answer 2

你在使用任何图书馆吗？如果是这样，你使用哪些？有时库会添加元素来执行它们创建的任何操作。

Answer 3

您可以在此处看到的这些元素是JavaScript或基于Javascript的任何其他库添加的元素。

例如：

假设我们在这个HTML中有一个div

<div id="example"></div>

我们已经编写了一段代码，

<script>
$( document ).ready(function() {
  $('#example').html('<p>example html</p>')
});
</script>

然后在这种情况下，如果您检查源代码，您将获得。

<div id="example"></div>

如果您使用Firebug或Inspect Element检查同一页面，您将获得

<div id="example"><p>example html</p></div>

希望现在明白。