How do you stop the document.x from modifying the end tags?

JavaScript
1

I am trying to store the initial setup of the HTML tag for use later in the program (after it gets modified) using this line:

let savedinitialmarkup = document.getElementsByTagName("html")[0].outerHTML;

The problem is, it is making modifications, such as:

<meta id="metaauthor" name="author" content="" /> 
becomes 
<meta id="metaauthor" name="author" content="">

and

<body id="body"></body>
becomes
<body id="body">

and the end body tag is moved and inserted at the end of the file between the ending script tag and the ending html tag.

How do I store the tag data as it actually originates?

I wrote a short demo to illustrate the issue:

<!DOCTYPE html>
<html>
	<head>
		<title>Test getting HTML tag</title>
		<meta id="metaauthor" name="author" content="" /> 
	</head>
	<body id="body"></body>
	<script>

		let savedinitialmarkup = document.getElementsByTagName("html")[0].outerHTML;
		console.log("savedinitialmarkup:");
		console.log(savedinitialmarkup);

		let bodytext1 = "  <h1> Test getting HTML tag </h1>";
		bodytext1 += " <br /> ";
		bodytext1 += "  <button type='button' id='initial' onclick='initial()' >InitialMarkup</button>";
		bodytext1 += "  <button type='button' id='done' onclick='done()' hidden>Done</button>";
		bodytext1 += "  <br />";
		bodytext1 += "  <textarea readonly id='ta' cols='100' rows='42'>(empty)</textarea>";
		
		
		let bodytext2 = " <h1> Done </h1>";
		bodytext2 += "<button type='button' id='repeat' onclick='repeat()' >Repeat</button>";


		document.getElementById("body").innerHTML = bodytext1;

		function initial() {
			document.getElementById("ta").innerHTML = savedinitialmarkup;
			document.getElementById("done").removeAttribute("hidden");
		}

		function done() {
			document.getElementById("body").innerHTML = bodytext2;
		}

		function repeat() {
			document.getElementById("body").innerHTML = bodytext1;
		}

	</script>
</html>
2

Well the thing is, when the browser loads your html its going to fix these small things automatically, and using .outerHTML fetches the fixed version.
But if you want the pre-treated raw document you can get it as text:

fetch(window.location.href)
  .then(res => res.text())
  .then(html => {
      savedinitialmarkup = html;
  });
3

Is there a way to fetch the non-”fixed” version?
This fetch method was my absolute last resort because there are some points where I would want to store it where it would already have been updated. I am trying not to add tracking of the changes, which the fetch method would require.

So I gotta ask, is there a way to load it from the DOM without getting the “fixed version”?

4

One more issue with the .fetch solution is that it causes CORS issues unless the browser is started with the –disable-web-security flag. It would be easier to manage this if the tag can be read from the DOM instead of from the file.

5

I guess this one stumped everybody. Back to the drawing board.