javascript - 通过 innerHTML 重写 html 中的元素

Question

我有一个这样的代码:

<p id = "outputLaps"></p>

JS:

document.getElementById("outputLaps").innerHTML = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds

而且我不想重写它，而是将它显示在之前的“圈”之下。 感谢您的回答:)。

Answer 1

使用 insertAdjacentHTML 当您想插入 HTML 时。

var str = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds;
document.getElementById("outputLaps").insertAdjacentHTML("beforeend", str);

但是，如果你只想插入文本，你可以追加一个文本节点:

var str = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds;
document.getElementById("outputLaps").appendChild(
  document.createTextNode(str)
);

如果您希望文本转到下一行，您可以选择

• 插入换行符\n并使用 white-space 设置段落样式设置为 pre , pre-wrap或 pre-line .
• 插入 <br /> HTML 元素。
• 使用不同的段落。似乎是最语义化的。