使用 document.write 时元素不显示在检查元素中

Question

我写了以下JS代码：

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

虽然我的功能运行良好，并且每当我在 Chrome 中使用 Ctrl+Shift+I 然后 Ctrl+F 时，我都会向页面添加一个新的 img 标签，然后我输入 <img src=x> 并得到 0 of 0 found。如何解决这个问题？

Answer 1

来自您的评论：

在 chrome 中按 ctrl+shift+i 然后按 ctrl+F 然后我输入，我得到 0 of 0 found

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

在元素面板中重新搜索：

元素面板不会显示您编写的确切 HTML，它会显示 DOM，呈现为规范的 HTML。例如，src 属性将用引号括起来。

但是，元素面板中的搜索框不搜索 HTML，它搜索 DOM。因此，输入纯文本将匹配文本节点中的文本、属性中的文本、属性名称、标签名称等，但不是精确的 HTML。因此，如果您搜索图像的 URL，它会找到它，但如果您搜索 <img src=，它就不会找到它。这与它是通过document.write 添加的无关，这只是 Chrome 的元素面板的工作方式。

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

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