javascript - 如何在使用 Javascript 在 div 中附加 html 时实现字符串插值

Question

可能是一个愚蠢的问题，但就是这样。我正在尝试根据从我的支持 Java 控制器接收到的数据在我的 div 中插入一些 html。一切正常，但我不知道如何将收到的数据中的字符串插入到我的 jsp 的段落标签中。

这是代码

<script>
    $(document).ready(function() {
        var url = "${context}/support/ajax";
        $.ajax({
            type : 'GET',
            url : url,
            dataType : 'json',
            success : function(data, status, xhr) {

                data.forEach(function(data) {
                    if (data.userType == 'O') {
                        $( ".chats" ).append(`
                                <div class='chat-avatar'>


                                <a class='avatar' data-toggle='tooltip' href='#'
                                    data-placement='right' title='' data-original-title=''> <img
                                    src='<c:url value = '/app-assets/images/portrait/small/avatar-s-1.png'/>'
                                    alt='avatar'>
                                </a>
                            </div>
                            <div class='chat-body'>
                                <div class='chat-content'>
                                    <p>{data.comment}</p> // **This is what I want to achieve**
                                </div>
                            </div>
                                `);

                    } 

                });
            }
        });

    });
</script>

上面的 ajax 调用工作正常，我确实收到了数据。此外，我可以将此 html 插入到适当的 div 元素中。现在我想在 p 元素中插入 data.comment 值。

我该怎么做呢 ？

编辑--1

使用 `${expression}` 语法后，<p>标签在浏览器控制台中显示为空白，而值显然存在。

编辑--2

我不知道为什么，但"<p>"+d.comment+"</p>" 正在工作。但不是插值。

Answer 1

因为您使用的是反引号 (`)，所以您接近使用模板字符串。您只需要正确使用占位符：

const data = {comment: 'The comment'};
const result = `...<p>${ data.comment }</p>...`;

console.log(result);

关于模板字符串的文档

Answer 2

我可以看到您将 data 变量用于 ajax 响应和循环中数据的当前值。你确定你引用了正确的对象吗？