jQuery.append()覆寫之前的.append()

我剛遇到一個與 jQuery 和 Javascript 相關的問題。這是我的（一段）HTML 代碼：

<div class="container">
    <input type="text" class="input" id="display-name" placeholder="Display Name">
    <input type="text" class="input" id="username" placeholder="Username">
    <textarea class=" textarea" id="post" placeholder="Write The Posts..."></textarea>
    <br>
    <button type="button" class="button is-info" id="publish-post">Send</button>
</div>
<hr>
<div class="container post-result">
    <p class="subtitle" id="post-status" style="color: darkgray;">No Posts Yet.</p>
</div>

這是我的整個 JavaScript 代碼：

$(() => {
    let postCount = 0;
    $("#publish-post").click(() => {
        const displayName = $("#display-name").val();
        const username = $("#username").val().toLowerCase().replaceAll(' ','_');
        const post = $("#post").val();
        const CurrentTime = new Date()
            .toString()
            .split(' ');
        if (username != undefined || post != undefined) {
            let index = "#post-status";
            postCount  ;
            console.log(username,post);
            $(index).text(`${postCount.toString()} Posts.`);
            $(index).append(`
            <div hljs-subst">${postCount}">
                <div >
                    <div >
                        <p  style="color: darkgray;">Post #${postCount}
                        <p >${displayName}</p>
                        <p  style="color: darkgray;">aciduser/${username}</p>
                    </div>
                    <div >
                        <p>${post}<p>
                    </div>
                </div
            </div>
            `);
        }
    });
});

假設我輸入顯示名稱“Foo”，用戶名“Bar”并發布“Foo Bar Baz”，然后單擊“發送”。是的，它可以作業，但是當我再次輸入時，它會覆寫 Foo Bar Baz 并將其替換為新值（即使沒有新值，只需隨機單擊），我希望它添加新元素（例如，當我發布“Foo Bar Baz”時） ",它添加元素 Foo Bar Baz 并且當我發布“Bar Foo Baz”時，它會在 Foo Bar Baz 之上添加新元素）。我該如何解決？非常感謝回答的人:)

uj5u.com熱心網友回復：

在父 div 中追加輸出。

$(index).text(`${postCount.toString()} Posts.`);
$(index).parent().append(`

單擊JsFiddle以查看或運行 snippest

$(() => {
    let postCount = 0;
    $("#publish-post").click(() => {
        const displayName = $("#display-name").val();
        const username = $("#username").val().toLowerCase().replaceAll(' ','_');
        const post = $("#post").val();
        const CurrentTime = new Date()
            .toString()
            .split(' ');
        if (username != undefined || post != undefined) {
            let index = "#post-status";
            postCount  ;
            console.log(username,post);
            $(index).text(`${postCount.toString()} Posts.`);
            $(index).parent().append(`
            <div hljs-subst">${postCount}">
                <div >
                    <div >
                        <p  style="color: darkgray;">Post #${postCount}
                        <p >${displayName}</p>
                        <p  style="color: darkgray;">aciduser/${username}</p>
                    </div>
                    <div >
                        <p>${post}<p>
                    </div>
                </div
            </div>
            `);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <input type="text" class="input" id="display-name" placeholder="Display Name">
    <input type="text" class="input" id="username" placeholder="Username">
    <textarea class=" textarea" id="post" placeholder="Write The Posts..."></textarea>
    <br>
    <button type="button" class="button is-info" id="publish-post">Send</button>
</div>
<hr>
<div id="post-result" style="color: darkgray;" class="container post-result">
    <p class="subtitle" id="post-status" style="color: black;">No Posts Yet.</p>
</div>

uj5u.com熱心網友回復：

這：

$(index).text(`${postCount.toString()} Posts.`);

每次發布時都會替換內容，然后在此之后追加。如果您移動 postCount.toString() 帖子。到附加然后你將有一個運行日志而不是覆寫先前的結果。添加了一些標簽。

$(() => {
    let postCount = 0;
    $("#publish-post").click(() => {
        const displayName = $("#display-name").val();
        const username = $("#username").val().toLowerCase().replaceAll(' ','_');
        const post = $("#post").val();
        const CurrentTime = new Date()
            .toString()
            .split(' ');
        if (username != undefined || post != undefined) {
            let index = "#post-status";
            postCount  ;
            console.log(username,post);
            $(index).prepend(`${postCount.toString()} Posts.
            <div hljs-subst">${postCount}">
                <div >
                    <div >
                        <p  style="color: darkgray;">Post #${postCount}
                        <p >Display Name:  ${displayName}</p>
                        <p  style="color: darkgray;">User Path:  aciduser/${username}</p>
                    </div>
                    <div >
                        Content:
                        <p>${post}<p>
                    </div>
                </div
            </div>
            `);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <input type="text" class="input" id="display-name" placeholder="Display Name">
    <input type="text" class="input" id="username" placeholder="Username">
    <textarea class=" textarea" id="post" placeholder="Write The Posts..."></textarea>
    <br>
    <button type="button" class="button is-info" id="publish-post">Send</button>
</div>
<hr>
<div class="container post-result">
    Post History:
    <p class="subtitle" id="post-status" style="color: darkgray;"></p>
</div>

你在尋找這樣的東西嗎？

標籤：javascript html 查询

上一篇：無法在單擊列印按鈕時隱藏內容jQuery資料表

下一篇：Python游戲開發，pygame模塊，Python實作貪吃蛇小游戲