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

Question

我写了下面的JS代码:

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

当我在 Chrome 中使用 Ctrl+Shift+I 然后使用 Ctrl+F 然后输入 <img src=x> 时，我的函数工作正常并向页面添加一个新的 img 标签。我得到 0 of 0 found .如何解决这个问题？

Answer 1

来自您的评论:

ctrl+shift+i in chrome then ctrl+F then I type and I get 0 of 0 found

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

在元素面板中重新搜索:

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

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

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

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