jQuery .append() Overwrite Previous .append()-CodePudding

I Just Ran Into A Problem Related To jQuery,And Javascript. Here Is My (Piece Of) HTML Code:

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

And This Is My Entire JavaScript Code:

$(() => {
    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 >
                <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>
            `);
        }
    });
});

Lets Say I Input The Display Name "Foo", Username "Bar" And Post "Foo Bar Baz", Then I Click Send. Yes Its Working But When I Input Again It Instead Overwriting The Foo Bar Baz And Replace It With The New Value (Even Without New Value, Just Random Clicking), I Want It To Add New Element (Eg. When I Post "Foo Bar Baz",It Add Element Foo Bar Baz And When I Post "Bar Foo Baz" it adds new element on top of Foo Bar Baz). How Do I Can Fix This? Big Thanks To People Who Answered :)

CodePudding user response：

append output in parent div.

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

click JsFiddle to see or run 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 >
                <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 >
    <input type="text"  id="display-name" placeholder="Display Name">
    <input type="text"  id="username" placeholder="Username">
    <textarea  id="post" placeholder="Write The Posts..."></textarea>
    <br>
    <button type="button"  id="publish-post">Send</button>
</div>
<hr>
<div id="post-result" style="color: darkgray;" >
    <p  id="post-status" style="color: black;">No Posts Yet.</p>
</div>

CodePudding user response：

The:

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

is replacing the content each time you post, and then you are appending after that. If you move the postCount.toString() Posts. to the append then you'll have a running log instead of overwriting the prior result. Added some labels.

$(() => {
    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 >
                <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 >
    <input type="text"  id="display-name" placeholder="Display Name">
    <input type="text"  id="username" placeholder="Username">
    <textarea  id="post" placeholder="Write The Posts..."></textarea>
    <br>
    <button type="button"  id="publish-post">Send</button>
</div>
<hr>
<div >
    Post History:
    <p  id="post-status" style="color: darkgray;"></p>
</div>

Are you looking for something like that ?