使用document.write时元素未显示在inspect元素中

Question

我编写了以下JS代码：

<script>
function myFunction() {
  document.write("<img src=x>")
}
myFunction();
</script>

当我的函数运行正常时，每当我在Chrome中使用Ctrl + Shift + I然后按Ctrl + F然后键入<img src=x>并得到0 of 0 found时，我的函数就会正常工作并将新的img标签添加到页面上。该如何解决？

Answer 1

根据您的评论：

  

在chrome中按ctrl + shift + i，然后按ctrl + F，然后输入，我发现0中的0

没有必要这样做。只需右键单击图像，然后单击检查。 Chrome会在“元素”面板中将您直接带到它。

在“元素”面板中重新搜索：

“元素”面板没有显示您编写的确切HTML，而是显示了以标准HTML呈现的DOM。例如，src属性将用引号引起来。

但是，“元素”面板中的搜索框不会搜索 HTML ，而是搜索DOM。因此，键入纯文本将与文本节点中的文本，属性，属性名称，标记名称等中的文本匹配，但与HTML完全不匹配。因此，如果您搜索图像的URL，它将找到它，但是如果您搜索<img src=，它将找不到它。这与通过document.write添加的内容无关，这只是Chrome的Elements面板的工作原理。

您可以通过键入XPath或CSS选择器来找到该元素，例如img[src=x]会找到它。这是一个示例（我使用的是Gravatar而不是x）：

在那里，您可以看到选择器img[src*=gravatar]找到了图像，因为该选择器（使用“包含”属性选择器*=）与元素匹配。