通过JS动态追加标签，以父评论子评论为例

以下代码前后端交互以Django模板语法为例

先来以伪代码来示意用法：

HTML部分：

JS动态插入部分代码：

运行之后我们来浏览器看检查打印的内容：

看插入前后打印结果我们可以得知

$title[0].innerHTML = $title.html() + '<p>嘿嘿</p>';

 这一句只是在原标签内部追加了一个

<p>嘿嘿</p>

原理解析：

$title.html()获取到了<tr>标签内部所有标签及文本，拿到的是字符串格式

然后让它+一个p标签，然后将相加后的整体重新加入到<tr>标签内部

innerhtml是原生JS的方法，它区别于innertext，innerhtml可以识别插入内容中的html标签

innertext会将插入内容当文本插入。

下面我们来看JS动态将子评论插入父评论下面显示的例子：

页面效果：

一个父评论为作为一楼展示，子评论都展示在父评论下面。

渲染思路：

1、父评论由页面加载时以模板渲染的方式加载和渲染

2、子评论在JS中定义一个function f(){},定义后直接f()调用，作用是向后端发送ajax请求，获取到所有子评论。

3、将子评论跟根据父评论id动态插入到父评论后面

首先看一篇文章父评论渲染HTML代码：

待渲染的子评论字符串代码：

 

 JS渲染的完整代码：

function f() {
            $.ajax({
                url: '/get_son_token/',
                type: 'post',
                data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'code': 'get_son_token',
                    'article_id': $("#id_article").val()
                },
                success: function (data) {   //data为后端返回的子评论数据，格式为：{'code':200,'msg':[子评论1,子评论2,子评论3...]}    
                    console.log(data.msg);  //子评论是一个个字典{'id':10,'create_time':'2019-06-22 22:12:12','parent_id':5,'user__usrname':'egon','user_id':'2','parent_user_username':'dxx'}
                                           
                    $.each(data.msg, function (index, obj) {
                        let id = obj.id;
                        let content = obj.content;
                        let create_time = obj.create_time;
                        let parentId = '#' + obj.parent_id;
                        let username = obj.user__username;
                        let user_id = obj.user_id;
                        let parent_username = obj.parent__user__username;
                        //一条待插入的回复记录
                        str = `<div><p>
                                        <a href='/${username}/'>${username}</a>
                                        回复: <a href="/${parent_username}/">${parent_username}</a>&nbsp;&nbsp;<span>${create_time}</span>&nbsp;&nbsp;
                                        <span>
                                            <a class='replay' username=${username} parent_id=${id}>回复</a>&nbsp;&nbsp;
                                            <a class='cite' content=${content}>引用</a>
                                        </span>
                                       </p>
                                    <p>内容: <span>${content}</span></p>
                                    <div id="${id}"></div>
                               </div>`;

                        //$(parentId).html()取到所有上一级评论内部html及文本
                        //与新插入的记录相加后再覆盖原标签内部所有html及文本
                        $(parentId)[0].innerHTML = $(parentId).html() + str;
                    })
                }
            })
        }
f();  //页面加载即调用

 Django后端为ajax提供数据的代码：

import datetime
def get_son_token(request):
    if request.POST.get('code') == 'get_son_token':
        #取出所有该文章下的子评论
        token_list = models.Token.objects.exclude(parent_id=None).filter(article_id=request.POST.get("article_id")).values('id',
　　　　　　　　　　　　　　　　　　'user__username','parent_id','create_time','content','user_id','parent__user__username')
        token_list = [dict(obj) for obj in token_list]

        for obj in token_list:
            obj['create_time'] = obj['create_time'].strftime("%Y-%m-%d %X")
            #obj: {'id': 23, 'user__username': 'kevin', 'parent_id': 13, 'create_time': '2019-06-24 22:49:32', 'content': '你又在拍马屁dxx', 'user_id': 39, 'parent__user__username': 'dxx'}
        back_dic = {'code': 200, "msg": token_list}
        return JsonResponse(back_dic)

数据库存储结构：

parent_id为自关联字段，article_id为文章外键关联，user_id为当前评论人（外键）