HTML not displaying correctly when inserted using jQuery.html()

Question

I have a table that carries out some AJAX actions, an returns an error if one is encountered.

I'm using JS to insert this error (which is a string), but because the string has HTML tags in it, it's being appended at the end of the JS element where I wish it to be inserted, as opposed to in the middle.

var debug_error = '<span class="debug-message hidden">'+table_obj.debug_string+'</span>',
    row =         $(id+' .row-debug'); // id is definded

row.html(debug_error);

For example, if debug_string was <h3>Error</h3><p>Please define an email address</p>, my results are -

<span class="debug-message hidden"> </span>
<h3>Error</h3>
<p>Please define an email address</p>

Yet if I remove the HTML tags, an use just ErrorPlease define an email address, it works as expected -

<span class="debug-message hidden">ErrorPlease define an email address</span>

Does any body know why this is happening? Thanks.

It's illegal to put a H3 in a span element.

Denys Séguret
– Denys Séguret

2013-08-07 11:36:17 +00:00
Commented Aug 7, 2013 at 11:36 — Denys Séguret
– Denys Séguret, Commented Aug 7, 2013 at 11:36

Rory McCrossan · Accepted Answer · 2013-08-07 11:36:09Z

4

The problem is because it's not valid to put a block level element, such as h3, inside an inline element, such as span. Make the span into a div and it should work:

var debug_error = '<div class="debug-message hidden">' + table_obj.debug_string + '</div >',
    row = $(id + ' .row-debug'); // id is definded    
row.html(debug_error);

If needed, you can make the div appear inline (and thus behave like the span did) using CSS:

.debug-message {
    display: inline;
}

answered Aug 7, 2013 at 11:36

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Gard Over a year ago

Bingo, that did the job. Thanks for sharing the knowledge.

Collectives™ on Stack Overflow

HTML not displaying correctly when inserted using jQuery.html()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related