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

i have table carries out ajax actions, returns error if 1 encountered.

i'm using js insert error (which string), because string has html tags in it, it's being appended @ end of js element wish inserted, opposed in middle.

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

for example, if debug_string <h3>error</h3><p>please define email address</p>, results -

<span class="debug-message hidden"> </span> <h3>error</h3> <p>please define email address</p> 

yet if remove html tags, use errorplease define email address, works expected -

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

does body know why happening? thanks.

the problem because it's not valid put block level element, such h3, inside inline element, such span. make span div , should work:

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

if needed, can make div appear inline (and behave span did) using css:

.debug-message {     display: inline; }