Question

我有一个像这样的代码：

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

JS：

{{1}}

并且我不想重写它，而是在之前的＆＃34; lap＆＃34;下显示它。谢谢你的回答：）。

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，并设置pre设置为pre-wrap，pre-line或<br />的段落样式。
插入['green', 'red', 'yellow', 'blue'] 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);

用innerHTML重写html中的元素

3 个答案: