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 标签，使用 just ErrorPlease define an email address，它会按预期工作 -

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

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

Answer 1

问题是因为将块级元素（例如h3）放入内联元素（例如span. 将其span变为 a 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;
}