Firebug显示的<div>比我在源代码中看到的要多

Question

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

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

为什么会这样呢？是不是因为CSS文件“包含”了那些“新的”<div>？

我从未见过CSS文件可以将<div>或<a>插入到超文本标记语言页面。

​

​

​

​

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

​

​

Answer 1

Firebug不会改变你的超文本标记语言，CSS也不会添加<div>(尽管它可以创建像::before这样的pseudo-elements )。

如果附加元素未包含在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元素检查相同的页面，您将获得

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

希望现在是晴朗的。