如何将 CSS 应用于 document.write()？

Question

我有一个程序将使用 Javascript 使用“document.write()”将值“打印”到屏幕上。打印的值是一个整数。我希望能够使用 CSS 将样式应用于正在打印的这个整数。下面是我尝试做的一些截断的示例代码，但它不起作用（程序只是退出：

var number = 5 //just for an example
document.write('<p id="jstext"' + number + '</p>')

这是我正在使用的 CSS 代码：

#jstext {
    text-align: center;
    font-size: 90px;
}

谢谢

Answer 1

那是错误的。看更正：

var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^

你忘了>在这里关闭。

下面的工作片段：

var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^

#jstext {
  text-align: center;
  font-size: 90px;
}

更新：不要使用以前的方法。

上面的方法是完全错误的。它将删除所有事件处理程序并完全损坏 DOM。更好的方法是使用：

document.body.appendChild(document.createElement('p'));
document.querySelector("body p:last-child").id = "jstext";
document.querySelector("#jstext").innerHTML = number;

片段

<script>
var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^
</script>

document.body.appendChild(document.createElement('p'));
document.querySelector("body p:last-child").id = "jstext";
document.querySelector("#jstext").innerHTML = number;