通过jQuery快速完成网页的动态添加

正常在通过jQuery对网页内的元素进行动态添加和删除时我们都是使用append()、addClass()、appendTo()等函数，但如果在处理较复杂的情况时，如果不进行简化，内容会很冗余，而且不便于代码阅读和审查，类似下面这样：

我们开发项目时大部分都采用前后端分离，最后进行整合，也就是前端页面会单独写好，先用一些虚拟数据，等后台写好之后再使用真实的数据。
其实还有种简便办法：

$('.layout .content .chat .chat-body .messages').append(`<div class="message-item ` + type + `">
                        <div class="message-avatar">
                            <figure class="avatar" title="` + (type == 'outgoing-message' ? 'Mirabelle Tow' : 'Byrom Guittet') + `">
                                <img src="../` + sendHead + `" class="rounded-circle">
                            </figure>
                        </div>
                        <div>
                            <div class="message-content">
                                ` + text + `
                            </div>
                            <div class="time">` + time + (type == 'outgoing-message' ? '<i class="ti-double-check text-info"></i>' : '') + `</div>
                        </div>
                    </div>`);

如果想在页面增加内容，可以直接把预先写好的html内容复制粘贴到jQuery的append()里，将修改的动态内容放到 “ ` ”这个标识符内(双引号里的那个符号，注意两个标识符需要和对应的动态内容有一个空格的间隔)。