通過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為當前評論人（外鍵）