CODEWITHSUNDEEP
javascripthtml
cerbin
cerbin

Reputation: 1189

Rewriting elements in html by innerHTML

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 :).

Upvotes: 2

Views: 1712

Answers (3)

Supersharp
Supersharp

Reputation: 31219

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>

Upvotes: 2

Barmar
Barmar

Reputation: 782653

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);

Upvotes: 1

Oriol
Oriol

Reputation: 288680

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.

Upvotes: 6

Related Questions