In doing some work on a project I stumbled across a formatting situation on a couple of websites that I couldn’t explain.
When viewing the markup in the Google Chrome DOM inspector, some values appear with quotes around them. These quotes do not appear in either the HTML source nor the rendered page.
The format is as follows:
<span class="...">$</span>
"XX."
<span class="...">xx</span>
OR
"$XX."
<span class="...">xx</span>
OR some slight variation of the two. The large X’s are the dollar amount in the price and the small x’s are the cents.
The part of these structures I don’t understand is the quotes around the dollar value. Why are they used and why do they not appear in the display of the website?
It is an “issue” with the Google Chrome DOM Inspector. When a String literal is not on the same line with its surrounding tag then the string literal is displayed on a new line with quotes around the string literal to make it visible where the string starts and ends.
For example when the string literal starts with a whitespace and is displayed in a new line inside the inspector then you only can see that if the string is quoted. Otherwise you won’t be able to see where the string begins.
Inspect this with Google Chrome DOM Inspector:
http://jsfiddle.net/bFcNn/2/
These quotes exist neither in source code nor in the DOM after page has been loaded. They only exist as a structural element inside Google Chrome’s DOM Inspector. They are at no time part of the page you’re inspecting.