通过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为当前评论人（外键）