jQuery .append() 覆盖前一个 .append()

Question

我刚刚遇到了一个与 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 class="card post-${postCount}">
                <div class="card-content">
                    <div class="media-content">
                        <p class="subtitle is-4" style="color: darkgray;">Post #${postCount}
                        <p class="title is-4">${displayName}</p>
                        <p class="subtitle is-5" style="color: darkgray;">aciduser/${username}</p>
                    </div>
                    <div class="content">
                        <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 的顶部添加新元素）。我该如何解决这个问题？非常感谢回答的人:)

Answer 1

在父 div 中追加输出。

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

点击JsFiddle查看或运行片段

$(() => {
    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 class="card post-${postCount}">
                <div class="card-content">
                    <div class="media-content">
                        <p class="subtitle is-4" style="color: darkgray;">Post #${postCount}
                        <p class="title is-4">${displayName}</p>
                        <p class="subtitle is-5" style="color: darkgray;">aciduser/${username}</p>
                    </div>
                    <div class="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 id="post-result" style="color: darkgray;" class="container post-result">
    <p class="subtitle" id="post-status" style="color: black;">No Posts Yet.</p>
</div>

Answer 2

：

$(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 class="card post-${postCount}">
                <div class="card-content">
                    <div class="media-content">
                        <p class="subtitle is-4" style="color: darkgray;">Post #${postCount}
                        <p class="title is-4">Display Name:  ${displayName}</p>
                        <p class="subtitle is-5" style="color: darkgray;">User Path:  aciduser/${username}</p>
                    </div>
                    <div class="content">
                        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>

您是否正在寻找类似的东西？