jQuery .append()覆盖以前的.append()
jQuery .append()覆盖以前的.append()
提问于 2021-12-23 14:39:12
我刚刚遇到了一个与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”和Post "Foo"，然后单击Send。是的，它可以工作，但当我再次输入时，它会覆盖Foo并用New值替换它(即使没有新值，只需随机单击)，我希望它添加新元素(例如。当我发布"Foo Bar Baz“时，它添加元素Foo Bar Baz，当我发布"Bar Foo Baz”时，它在Foo Bar Baz之上添加新元素)。我怎么才能解决这个问题？感谢回答的人:)
回答 2
Stack Overflow用户
发布于 2021-12-23 14:53:27
以下方面：
$(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>
你在找这样的东西吗？
Stack Overflow用户
发布于 2021-12-23 14:55:10
在父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 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70463602
复制相关文章
相似问题
腾讯云开发者
