为什么HTML属性中的opener和closer的（'）在document.documentElement.outerHTML中呈现为（''）？ 以及如何预防呢？

Question

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 " , 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?

Answer 1

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.