.innerHTML loses HTML Syntax formatting

Question

I just noticed that browser ignores HTML formatting (such as aligning the two attributes in this snippet):

 <div id="container">
      <div id="contained"
           other-prop="some value">
      </div>
 </div>

If you run

var container = document.getElementById('container');
console.log(container.innerHTML);

You get the output

<div id="contained" other-prop="some value">
</div>

It doesn't matter how it's written in the source or even if you set .innerHTML in JavaScript directly.

Is it possible to query the page source corresponding to an element as the user wrote it in JS? With white-spaces and everything. I can see there being a problem when the user modifies the element using DOM operations, in which case I'll still be happy if

1. Original user formatting is kept for everything untouched by modifications, or
2. It's possible to get the original source as the user wrote it on page load, without the DOM modifications

A snippet so you can see it in action:

var container = document.getElementById('container');
console.log(container.innerHTML);

container.innerHTML = `  
  <div id="contained"
       other-prop="some value">
  </div>
`;

console.log(container.innerHTML);

container.children[0].setAttribute('modification', '');

console.log(container.innerHTML);

<div id="container">
  <div id="contained"
       other-prop="some value">
  </div>
</div>

Answer 1

It is not possible at all. Think code as a message between computers to express visual representation, where whitespace is not important.

Answer 2

Using conventional methods, no, this is not possible. HTML always discards excess whitespace when it renders the page, and unfortunately, there's no way to disable this functionality.

In short, when you write HTML code, you give the browser instructions for what to render, but not how to render it. When you load a page, the browser interprets those instructions and outputs a rendering of what it thinks you wanted.

When you use innerHTML, you're requesting that the browser convert that rendered content back into HTML instructions. It does this almost perfectly, but it can't and won't put back the whitespace it removed; since that information doesn't affect the look of the page, the browser ignores it when rendering.

If you're comfortable with throwing all best practice out the window, you could theoretically use a Fetch request to query the server for the HTML content of the page you're on, then parse the response as plaintext.

This is problematic for your specific use case, however, since if you want to retrieve a specific element from this text, you don't have any DOM methods or utilities at your disposal. If you try to parse the plaintext using DOMParser or something similar, the text will start acting like HTML again and discard the excess whitespace.

Your best bet, if you still really want to do this, would be to use a RegEx or .indexOf() to find the element you're looking for in the middle of the plaintext response. I really do want to emphasize, though, that this is extremely bad practice and shouldn't be used for anything outside of research.

It's also important to note that if the page you're attempting to process is a client-generated SPA (single-page app), then this solution will not work. If you are dealing with a client-side SPA (e.g., React, Angular, Vue, etc.), it's possible you could reverse-engineer the rendering scripts to find the definition for the element that contains the whitespace. Beyond that, however, you're likely out of luck.