通过jQuery附加HTML内容

时间:2019-11-10 13:34:20

标签: javascript jquery html append

我有一个页面,可以在其中使用jQuery按需加载评论。我有<div id="comments">,其中我通过格式化预定义的模板来附加HTML。

我的模板如下: <div class="entry clearfix" style="position: absolute; left: 1oopx; top: 20px;"> <div class="comment-image"> <img class="image_fade" src="<#ImageUri#>" alt="<#Header#>"> </div> <div class="entry-title"> <h2><a href="/Blog/Coments/<#Uri#>"><#Header#></a></h2> </div> <ul class="entry-meta clearfix"> <li><i class="icon-calendar3"></i> <#CommentDate#></li> <li><i class="icon-user"> <#Handle#></i></li> </ul> <div class="entry-content"> <#Body#> </div> </div>;

我使用jQuery GET获取评论内容,然后按如下所示替换内容:

html += blogitemHtml .replace(/<#ImageUri#>/g, item.ImageUri) .replace(/<#Header#>/g, item.Header) .replace(/<#Uri#>/g, item.FriendlyUri) .replace(/<#CommenDate#>/g, item.PublishedOn) .replace(/<#Handle#>/g, item.Handle) .replace(/<#Body#>/g, item.Intro);

$("#comments").append(html);

问题是正文中的数据也是带有标签的HTML文档。因此,我看到的是HTML标记,而不是格式化的文本。

我知道我可以使用jQuery html()函数,但是它会更改div的内容,我想在其中添加新内容。

我怎么可能添加内容并按照HTML标签的要求以格式化的方式显示内容。

我应该看到的示例:

这是我的第一评论。我还要感谢您video

Bu相反,我看到了: <p> This is my <b>first</b> comment. And I would like to thank you with this <a href="https://youtube.com">video</a>.

1 个答案:

答案 0 :(得分:1)

尝试使用parseHTML()将字符串解析为DOM节点数组。

var htmlNodes = $.parseHTML( html);
$("#comments").append(htmlNodes );