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

【问题标题】：How to achieve string interpolation while appending html inside a div using Javascript如何在使用 Javascript 在 div 中附加 html 时实现字符串插值
【发布时间】：2019-11-28 18:37:13
【问题描述】：

可能是一个愚蠢的问题，但就是这样。我正在尝试根据从我的支持 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>" 正在工作。但不是插值。

【问题讨论】：

如此接近。模板字符串（或模板文字；字符串的反引号版本）使用语法${expression} 来插入表达式。所以你只是错过了当前插值语法前面的$ :)
请注意，并非所有浏览器都支持模板文字
当我这样做时（反引号）...
${data.comment}
....（反引号）UI 上什么也没有出现。在 chrome.a 上运行它

标签： javascript jquery-append

【解决方案1】：

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

【讨论】：

即使我把它改成两个不同的变量，结果也是一样的。

【解决方案2】：

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

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

console.log(result);

Documentation on Template Strings

【讨论】：

当我这样做时（反引号）...
${data.comment}
....（反引号）UI 上什么也没有出现。在 chrome.a 上运行它
@Naxi，如果你在success函数开头的console.log(data.comment)，有没有可能是空字符串？
我查过了，不是。它在 console.log 中正确显示了值，但在模板文字中却没有。