javascript - 通过 jQuery append HTML 内容

标签 javascript jquery html append

我有一个页面,我使用 jQuery 按需加载评论。我有<div id="comments">我通过格式化预定义模板来 append 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);

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

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

我怎样才能添加内容并以 HTML 标签应有的格式显示它。

我应该看到的示例:

这是我的第一条评论。我想借此感谢您video

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

最佳答案

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

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

关于javascript - 通过 jQuery append HTML 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58789176/

相关文章:

javascript - 如何理解 javascript 中的 chain multiple =>

javascript - Safari 扩展 : Event for a completely new tab?

javascript - 在 Vue.js 中将事件从子组件引发到容器组件?

javascript - jquery: 如果 (target) 是 ('.wrapper' 的 child ) then (do something)

javascript - jquery - 查找具有某些属性的第一个前一个节点

java - 如何在解析 html 页面时从 html 页面中的 javascript 函数中提取变量的值

javascript - JS 规则在悬停时影响 2 个单独的链接

JavaScript "associative"数组访问

jquery - 如何根据服务器日期格式设置 jQuery UI datepicker 的 dateFormat?

javascript - HTML 中范围的表单控件