Inserting HTML from a fetch gives me extra blank rows..?

William Morris 2021

Making a fetch call and getting html back, like so:

JGServices

	



ShippingHandling

	



District

	



Penalty

...then using javascript to append it to the TBODY tag of the relevant table. I've tried two ways:

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
let ih = t.innerHTML;
ih += data;
t.innerHTML = ih;

...and...

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
t.insertAdjacentHTML('beforeend', data);

And in both cases, the browser renders it like this:

JGServices

	




ShippingHandling

	




District

	




Penalty

I can't figure out why or how to stop the extra, empty rows from appearing. Anyone have any ideas? - Bill Measure with a micrometer. Mark with a crayon. Cut with an ax.

enhzflep

What is data ? From a cursory look, it seems likely to be a text-string which holds "<tr></tr>" Updating the innerHTML of an element is discouraged, since it causes a complete recalculation of it and its children for the purposes of display. A better approach is to create elements and then append them to their parents. Depending on the quantity of content to be added, the <template> may be the best way of creating all the new elements. As a simple example, let's create a link

let a =document.createElement('a');
a.textContent = "Goto google homepage";
a.href = "https://www.google.com";
document.body.appendChild(a);

Which, is a much better approach than:

let parent = document.body;
parent.innerHTML += "<a href='www.google.com'>Goto google homepage</a>"

Richard Deeming

Quote:

<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size=10 value="99.00" onfocus="this.blur()">
</td>
<tr>
<tr>
...

Your HTML has no closing </tr> tags; instead, it has two opening <tr> tags. The browser will do its best to cope with this invalid HTML; a new opening <tr> tag will automatically terminate the previous row and start a new one. But since you have two of them in a row, you end up with a blank row every time you have <tr><tr>.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Lost User

Richard Deeming wrote:

<tr><tr>.

Reminds me of the policemen's song in The Pirates of Penzance. :laugh:

Hess Duffy

Use the
empty tag and it will insert a blank line. For a straight line across the page use

empty tag.[^]