用innerHTML重寫html中的元素

Question

我有一個像這樣的代碼：

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

JS：

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

而且我不想重寫它，而是在之前的“圈”下顯示它。 謝謝你的答案:)。

Answer 1

如果要插入HTML，請使用insertAdjacentHTML 。

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元素。
• 使用不同的段落。 似乎是最具語義性的。

Answer 2

更好的解決方案是使用<ol>或<ul id="outputLaps"> ，並將<li>s添加到其中。

var li = document.createElement( 'li' )
li.textContent = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds

document.getElementById( 'outputLaps' ).appendChild( li ) 

在這種情況下，因為.appendChild()返回要添加的元素，我們可以避免使用該變量。

document.getElementById( 'outputLaps' )
        .appendChild( document.createElement( 'li' ) )
        .textContent = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds

---

也許你不想要丑陋的子彈，所以你可以改變它們，或者只是用CSS規則刪除它們：

<style>
    ul { list-style-type: none; }
</style>

Answer 3

您可以使用+=連接到現有值。

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

您還可以使用insertAdjacentHTML()方法，該方法不會修改段落中的現有DOM節點。

document.getElementById("outputLaps").insertAdjacentHTML('beforeend', "<br>Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds);