1

I have the following response returned from a server. It's a html fragment. I want to parse it with DOMParser like this:

let responseText = '<div>Text Content</div><tr><td>Cell</td></tr>';
let doc = new DOMParser().parseFromString(`<body><template>${responseText}</template></body>`, 'text/html');
let fragment = doc.body.firstChild.content;

Here the fragment variable in runtime contains the following DOM:

#document-fragment
  <div>Text Content</div>
  Cell

My question: I expected it to contain <tr> but it doesn't. How do I change the parsing code so that it properly contains element?

I'm not allowed to change response text.

Teemu
  • 22,918
  • 7
  • 53
  • 106
Oleksandr.Bezhan
  • 2,028
  • 3
  • 22
  • 31
  • 3
    `` is only a valid child of ``, `` or ``.
     – Mr. Polywhirl Mar 06 '23 at 15:08
  • 2
    *"I'm not allowed to change response text."* - Then what you have is a malformed HTML structure, which likely would require parsing it manually instead of using a DOM parser (which would attempt to "correct" the structure just like a browser does). – David Mar 06 '23 at 15:14

2 Answers2

1

The <tr> element is only a valid child of <table>, <thead>, <tbody> or <tfoot>. See excerpt from MDN below for more informaition.

Try wrapping the <tr> in a <table> and using createContextualFragment instead.

let responseText = '<div>Text Content</div><tr><td>Cell</td></tr>';
responseText = responseText
  .replace(/<tr>/, '<table>$0')
  .replace(/<\/tr>/, '$0</table>');

const fragment = document.createRange().createContextualFragment(responseText);
const cellContent = fragment.querySelector('td').innerText;

console.log(cellContent); // Cell
.as-console-wrapper { top: 0; max-height: 100% !important; }

See:

MDN ~ <tr>: The Table Row element ~ Technial summary

Permitted parents <table> (only if the table has no child <tbody> element, and even then only after any <caption>, <colgroup>, and <thead> elements); otherwise, the parent must be <thead>, <tbody> or <tfoot>

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
0

DomParser is quite strict when parsing HTML. The HTML example you provided is not in accordance with the specification

Here are rules to be followed.
HTML Standard

According to that document, you should not put <div> next to <tr>

This answer should also help
Create new DOM element

developer
  • 199
  • 2
  • 10