CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtoolsinspect-element
Ahmad
Ahmad

Reputation: 254

Element doesn't show in inspect element when using document.write

I wrote the following JS code:

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

while my function works fine and adds a new img tag to the page whenever I use Ctrl+Shift+I in Chrome then Ctrl+F then I type <img src=x> and I get 0 of 0 found. How to fix this?

Upvotes: 2

Views: 1925

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075755

From your comment:

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

There's no need to do that. Just right-click the image and click Inspect. Chrome will take you right to it in the Elements panel.

Re searching in the Elements panel:

The Elements panel doesn't show the exact HTML you wrote, it shows you the DOM, rendered as canonical HTML. So for instance, the src attribute will be in quotes.

But, the search box in the Elements panel doesn't search HTML, it searches the DOM. So typing plain text will match text in text in text nodes, text in attributes, attribute names, tag names, etc., but not exact HTML. So if you search for the URL of the image, it'll find it, but it won't find it if you search for <img src=. This has nothing to do with it having been added via document.write, it's just how Chrome's Elements panel works.

You can find the element by typing XPath or a CSS selector, for instance img[src=x] will find it. Here's an example (I used your Gravatar rather than x):

Example using search in elements panel

There, you can see that the selector img[src*=gravatar] found the image, because that selector (using the "contains" attribute selector, *=) matches the element.

Upvotes: 1

Related Questions