使用jQuery.HTML(）插入时HTML显示不正确

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

本文关键字：HTML 显示 插入 不正确 jQuery 使用      更新时间：2023-09-26

我有一个表，它执行一些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>

有人知道为什么会发生这种事吗？谢谢

问题在于，将块级元素（如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;
}
相关文章：