Javascript 是否在不重新加载页面的情况下将新项目添加到列表/局部视图？

我在谷歌上搜索了一下，发现这可能需要使用部分视图和JavaScript。但我想在进一步挖掘之前得到一些建议

我努力实现的目标是： 在文本框中输入一些文本，按下按钮，页面不会被刷新（使用JavaScript），文本框上方或下方的某个地方会显示刚刚键入的文本（尚未保存在数据库中），以及删除任何添加项的能力（可能在每段文本后都有一个x按钮，当单击该段文本时，该文本将从页面中删除，就像stackoverflow中如何删除标记一样）

---

谢谢。

这是一个开始。也许其他人可以完成它。我得走了

var paragraphInput=document.querySelector（“#paragraphInput”）；
var tagsHere=document.querySelector（“#tagsHere”）；
document.querySelector（“#breakBtn”）.addEventListener（'click'，function（）{
var words=paragraphInput.value.split（“”）；
控制台日志（文字）；
对于（var i=words.length；i>=0；i--）{
if（单词[i]！=未定义）{
var newspan=document.createElement（“span”）；
newspan.classList=“post tag”；
newspan.innerHTML=单词[i]+“”；
Tagsher.appendChild（新闻潘）
}
}
})；

html，正文{
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
字体大小：13px；
线高：1.266667；
颜色：#242729；
}
.tag编辑器{
边框：1px实心#c8ccd0；
光标：文本；
背景色：#FFF；
位置：相对位置；
溢出：隐藏；
空白：nowrap；
}
司{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
.邮政标签{
位置：相对位置；
显示：内联块；
填充物：4em.5em；
边距：2×2×2×0；
字体大小：13px；
线高：1；
空白：nowrap；
文字装饰：无；
文本对齐：居中；
边框宽度：1px；
边框样式：实心；
边界半径：0；
过渡：所有.15秒轻松进出；
颜色：#39739d；
背景色：#E1ECF4；
边框颜色：透明；
}
.删除标签{
宽度：14px；
高度：14px；
垂直对齐：中间对齐；
显示：内联块；
背景位置：-40px-319px；
光标：指针；
左边距：3倍；
页边顶部：-2px；
边缘底部：-1px；
背景图片：url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.png?v=0786b22b9381);
背景图片：url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be)，无；
背景尺寸：初始尺寸；
背景重复：无重复；
溢出：隐藏；
}

javascript
asp.net-core-mvc
asp.net-mvc-partialview

找到一篇使用JQuery插件tokenInput的帖子，它几乎完成了我所需要的一切（仍在计算样式部分）。此示例适用于.net用户：

---

您可以使用纯HTML和jQuery完成您提到的所有操作

$（文档）.ready（函数（）{
$（'#listSection'）。在（'单击'，'.itemDelete'，函数（）上{
$（this）.最近（'li'）.remove（）；
});
});
函数addItem（）{
var text=$（'#txtVal'）.val（）；
$（“#listSection ul”）。追加（“
”+text+”
”；
$（'#txtVal'）.val（''）；
}；

动态列表示例

输入文本


添加到列表中


我的名单

如果有人能为我提供一个能做这种工作的样品，我将不胜感激。非常感谢。我将试一试。