By JS dynamic additional label to comment, for example sub-parent comment

First to schematically usage pseudocode:

HTML part:

 

JS dynamic insertion part of the code:

 

After the run we have to look at the contents of the browser to check print:

Print see results before and after insertion of us can learn

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

 This one just inside the original label added a

< P > hey </ P >

 

Principle Analysis:

$ Title.html () to obtain the <tr> tags and labels of all the internal text format of the string to get

Then let p + a label, and then rejoin the whole internal <tr> tag after adding

JS innerhtml native method, which is different from innerText, innerhtml html tag may identify the contents of the inserted

innertext will insert the contents when the text is inserted.

Here we look at the JS dynamic child into the parent comments Comments example shown below:

Results page:

As a parent commentary for the show floor, comments are displayed in sub-parent comment below.

Rendering ideas:

1, when loaded by a parent commentary page template to load and render rendered ways

2, the sub-defined comments in JS a function f () {}, the definition of direct f () call, the role is transmitted to the rear ajax request, obtain all the child comment.

3, according to the sub-insert comments with parent comment id dynamic behind parent comment

 

First look at the parent comment to render HTML code:

 

 

Comments sub-strings of code to be rendered:

 

 

 JS rendering the complete code:

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)