html 中的样式脚本输出

Question

我在 html 中有以下脚本，但 html 中的输出没有样式。

如何最好地设置脚本输出的样式，使其适合现有的 html 结构？

我认为这可以通过 id 获取输出来实现，但还没有弄清楚。

<script>
    var myArray = [
        "<ul><p>Alef</p><p>1</p>",
        "<ul><p>Bet</p><p>2</p>"
    ];

    var randomItem = myArray[Math.floor(Math.random()*myArray.length)];

    document.body.innerHTML += randomItem;
</script>

Answer 1

不要在 body 上设置 innerHTML，而是尝试创建一个新元素，然后您可以添加样式，然后将该元素添加到 body。

const randomItemElement = document.createElement("div");
randomItemElement.innerHTML = randomItem;
randomItemElement.style.color = "blue";

document.body.appendChild(randomItemElement);

您还可以创建一个 CSS 类并将其设置在您的元素上，而不是设置单个属性，例如randomItemElement.classList.add("myClass")