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

问题是因为将块级元素（例如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;
}

使用jQuery.html（）插入HTML时无法正确显示

1 个答案: