Question 44455 in Html Question posted in
Some basic documentation can be found here.

Parse html fragment that contains a table row

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.

Tags:

2

Answers


  1. 0

    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>

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search