i have a a code like that:

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

JS:

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

and i don't want to rewrite it, but to display it under the previous "lap". Thanks for answers :).

i have a a code like that:

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

JS:

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

and i don't want to rewrite it, but to display it under the previous "lap". Thanks for answers :).

• javascript
• html

Share Improve this question Follow edited Sep 23, 2016 at 21:23 Barmar 784k5757 gold badges548548 silver badges659659 bronze badges asked Sep 23, 2016 at 21:22 cerbincerbin 1,1891616 silver badges3434 bronze badges 2

• 1 Maybe you should be using <ol> or <ul> instead of <p>? – Barmar Commented Sep 23, 2016 at 21:25
• 1 Try .insertAdjacentHTML('beforeend', yourString) instead of innerHTML – colecmc Commented Sep 23, 2016 at 21:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Use insertAdjacentHTML when you want to insert HTML.

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

However, if you only want to insert text, you can append a text node:

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

In case you want the text to go to the next line, you can either

• Insert a newline character \n and style the paragraph with white-space set to pre, pre-wrap or pre-line.
• Insert a <br /> HTML element.
• Use different paragraphs. Seems the most semantic.

A better solution is to use <ol> or <ul id="outputLaps"> instead, and add <li>s to it.

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

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

In this case, because .appendChild() returns the element being added, we can avoid the variable.

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

---

Maybe you don't want the ugly bullets, so you can change them, or simply remove them with a CSS rule:

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

You can use += to concatenate to the existing value.

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

You can also use the insertAdjacentHTML() method, which doesn't modify the existing DOM nodes in the paragraph.

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