javascript - 使用 jQuery.html() 插入时 HTML 无法正确显示

Question

我有一个执行一些 AJAX 操作的表，如果遇到一个错误，则返回一个错误。

我正在使用 JS 来插入这个错误(这是一个字符串)，但是因为字符串中有 HTML 标记，所以它被附加在我希望插入它的 JS 元素的末尾，而不是在中间。

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

row.html(debug_error);

例如，如果 debug_string是<h3>Error</h3><p>Please define an email address</p> ，我的结果是 -

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

然而，如果我删除 HTML 标签，则只使用 ErrorPlease define an email address , 它按预期工作 -

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

有人知道为什么会这样吗？谢谢。

Answer 1

问题是因为将 block 级元素(例如 h3)放在内联元素(例如 span)中是无效的。将 span 变成 div 它应该可以工作:

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

如果需要，您可以使用 CSS 使 div 显示为内联(因此表现得像 span 那样):

.debug-message {
    display: inline;
}