Javascript - Adding line breaks to array strings

Question

I have a script that displays a random sentence on button click. I would like to add a line break to some of the sentences. Example:

"This is the first sentence"

becomes:

"This is
the first sentence"

I have tried using \n and <br>, but none works.
What else could I try?

    const p = document.getElementById("sentences");
    const origSentences = ["This is the first sentence.", "This is the second sentence.", "This is the third sentence."];
    let remainingSentences = [];

    function randomSentence() {
        if (remainingSentences.length === 0) remainingSentences = origSentences.slice();
        const {
            length
        } = remainingSentences;
        const [quote] = remainingSentences.splice(Math.floor(Math.random() * length), 1);
        p.textContent = quote;
    }

<p><button onclick="randomSentence()" type="button">Random Sentence</button></p>
<p id="sentences"></p>

Alex McMillan · Accepted Answer · 2019-01-19 22:35:27Z

1

If you assign your quote to the textContent field of your paragraph p, it will be rendered as plain text. If you instead use innerHTML, it will parse and render any HTML you provide.

See example.

const p = document.getElementById("sentences");
const origSentences = [
  "This is the <br /> first sentence.",
  "This is the second sentence.",
  "This is the <br /> third sentence."
];
let remainingSentences = [];

function randomSentence() {
  if (remainingSentences.length === 0)
    remainingSentences = origSentences.slice();
  const { length } = remainingSentences;
  const [quote] = remainingSentences.splice(
    Math.floor(Math.random() * length),
    1
  );
  p.innerHTML = quote;
}

<p>
  <button 
    onclick="randomSentence()" 
    type="button">
    Random Sentence
  </button>
</p>

<p id="sentences"></p>

edited Jan 19, 2019 at 22:35

user933941

answered Jan 19, 2019 at 14:34

Alex McMillan

18.1k13 gold badges63 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikeMichaels Over a year ago

Thanks! It fixed my problem! I was unaware of that difference between textContent and innerHTML. I guess I still have a lot to study.

Collectives™ on Stack Overflow

Javascript - Adding line breaks to array strings

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related