1

Why the single quote (') of opener and closer in HTML attribute is rendered as double quote ('') in document.documentElement.outerHTML? and how to prevent it?

I have this element in my html page:

<div data-css="mo-cssclassvalueuseditems" class='{MO-CSS-CLASS value="UsedItems"}'>
</div>

When I tried to get the entire html via document.documentElement.outerHTML, as a result, it becomes like this:

<div data-css="mo-cssclassvalueuseditems" class="{MO-CSS-CLASS value=&quot;UsedItems&quot;}">
</div>

For the &quot;, it doesn't matter at all. But for the opener and closer of single-quotes ('), why it's rendered as double-quote ('') instead of single-quote (') ?

Is there any solution to keep the quotes as it is?

Yusril Maulidan Raji
  • 1,682
  • 1
  • 21
  • 46
  • hardly matters! http://stackoverflow.com/questions/2373074/single-vs-double-quotes-vs – ajaykumar Sep 01 '16 at 09:54
  • @ajaykumar Yup, of course it's a matter for the using of quotation. What I mean by "doesn't matter at all" is the rendering of double-quote into `&quot`. It's not a problem because in the end, it will be rendered back into a double-quote again, but this is not happened for the single-quote unfortunately. – Yusril Maulidan Raji Sep 01 '16 at 13:12

1 Answers1

2

When the DOM is loaded, it's turned into DOM data structure that represents the logical relationships between all the elements and attributes. It doesn't retain the source code. So it just has the information that the class attribute contains the value {MO-CSS-CLASS value="UsedItems"}. The fact that you used single or double quotes in the original HTML is lost in this translation to the DOM. When an element is serialized by reading its innerHTMl or outerHTML property, attribute values are always surrounded by double quotes.

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Okay then. I just want to tell my case, the `{MO-CSS-CLASS value="UsedItems"}` tag is like a syntax, so it will be translated into a particular value at the end. But because in the end, the element becomes `class="{MO-CSS-CLASS value="UsedItems"}"`, the system can't read it because it contains the same quote. Therefore is it possible to retrieve the "original" syntax which has the single-quote instead of the double-quote with javascript? – Yusril Maulidan Raji Sep 01 '16 at 13:07
  • I don't understand what you're asking. The quotes used **around** the value don't affect the value of the attribute itself. – Barmar Sep 01 '16 at 16:04
  • Why are you using `outerHTML` for this? Use `documentElement.className` to get the contents of the `class` attribute. – Barmar Sep 01 '16 at 16:04