无重复的多个随机报价生成器

Question

嘿，我已经为随机报价生成器编写了代码

const qouteBtn = document.querySelector('.random');
const quoteView = document.querySelector('#randomQuote');
const quote = [
  { quote: 'Be yourself; everyone else is already taken' },
  { quote: 'So Many Books, So Little Time' },
  { quote: "Strangers think I'm Quiet. My Friends think I'm outgoing. My best friends know that I'm Completely Insane" },
  { status: 'A room without books is like a body without soul' },
  { status: 'You only live once, but if you do it right, once is enough' },
];
quoteBtn.addEventListener('click', randomQuote);
function randomQuote() {
  let i = Math.floor(Math.random() * quote.length);

  quoteView.innerHTML = quote[i].quote;
}

我制作了一个按钮，这样当我点击报价时，报价就会改变。但是我怎样才能使它成为当我单击一个按钮时它会创建一个

并在其上插入引号，如果我单击它会再次创建另一个

并插入它而不重复。所以如果我点击按钮

<div>
<p></p>
</div>

p 元素会自己创建。

Answer 1

制作一个大 div（作为所有东西的容器），然后

largeDiv.innerHTML += '<div class="innerDiv">' + quote[i].quote + '</div>';

然后为 .innerDiv 添加样式。这将为之前的 div 添加额外的 div。