Javascript 如何让Math.random（）添加到返回值中，而不是替换它们

我是javascript和jquery的新手，所以如果有明显的解决方案，请耐心听我说。我有两个问题：

我正在创建一个随机叙述者生成器，您可以在其中选择不同的叙事元素来组成情节。为此，我有几个数组，但为了这个示例，让我们展示两个：

var place = ["haunted woods","abandoned mansion", "river", "hospital"];
var decade = ["20's","30's","40's","50's","60's","70's","80's","90's"];

对于每个阵列，我都有以下内容：

$(".placebutton").click(function() {
$(".tags").text(place[Math.floor(Math.random()*place.length)]);
});

$(".decadebutton").click(function() {
$(".tags").text(decade[Math.floor(Math.random()*decade.length)]);
});

这一切都很好，除了每次点击其中一个按钮，它都会替换以前生成的内容。我希望它能做到的是相互添加，彼此相邻显示，如：

50年代|河流|废弃大厦| 20年代（等等…）

我也尝试过使用.append，但都是一样的

第二件我不知道该怎么做的事情是使这些元素可删除：当鼠标悬停在其中一个值上时，应该会出现一个X图标，并且只能删除该值，而所有其他元素都会随之调整（不会在删除值之前留下任何间隙）

我真的非常感谢所有的帮助！：）

试试这个：

var-place=[“闹鬼的森林”、“废弃的大厦”、“河流”、“医院”]；
风险值十年=[“20年代”、“30年代”、“40年代”、“50年代”、“60年代”、“70年代”、“80年代”、“90年代”]；
函数addTag（名称）{
$（“
”+name+“
”）.appendTo（“.tags”）；
}
$（“.placebutton”）。单击（函数（）{
addTag（place[Math.floor（Math.random（）*place.length）]；
});
$（“.decadebutton”）。单击（函数（）{
addTag（decade[Math.floor（Math.random（）*decade.length）]；
});
$（'.tags'）。在（'click'，'a'，function（）上{
$（this.parent（）.remove（）；
});
.tags{
列表样式：无；
}
.tags li、.tags li:之后{
显示：内联；
}
李：以后呢{
内容：“|”；
}
李：最后一个孩子：之后{
显示：无；
}



地方
十年