Parse embedded XML with JavaScript

Question

I'm failing to parse a XML document embedded in a script tag with Vanilla JavaScript:

const xmlStr = document.getElementById('xml').innerText;
const xmlDoc = new DOMParser().parseFromString(xmlStr,'text/xml');
console.log(xmlDoc.getElementById('bar').textContent);

<script id="xml" type="text/xml">
<?xml version="1.0" encoding="utf-8"?>
<foo>
  <bar id="bar">Hello world!</bar>
</foo>
</script>

What's the problem here?

Answer 1

As explained by the error message,

const xmlStr = document.getElementById('xml').textContent;
const xmlDoc = new DOMParser().parseFromString(xmlStr, 'text/xml');
console.log(new XMLSerializer().serializeToString(xmlDoc));

<script id="xml" type="text/xml">
<?xml version="1.0" encoding="utf-8"?>
<foo>
  <bar id="bar">Hello world!</bar>
</foo>
</script>

XML Parsing Error: XML or text declaration not at start of entity

You can’t have whitespace, newlines included, before <?xml …?>.

const xmlStr = document.getElementById('xml').textContent;
const xmlDoc = new DOMParser().parseFromString(xmlStr, 'text/xml');
console.log(xmlDoc.getElementById('bar').textContent);

<script id="xml" type="text/xml"><?xml version="1.0" encoding="utf-8"?>
<foo>
  <bar id="bar">Hello world!</bar>
</foo>
</script>

(see also trimStart)