How can I add content to an existing JavaScript variable?

Question

So I want to add content like a string or another variable to a variable that already exists. I know this isn't right, but this is what I have.

var variable = "Variable";

function dispVar1() {
    let p = document.createElement("p");

    p.innerHTML = variable;
}

function dispVar2() {
    let p = document.createElement("p");
    let alteredVar = variable + " that has been altered";
    /* Also, could I do "" + variable to make string go before the variable? */

    p.innerHTML = alteredVar;
}

<input type="button" value="Original" onclick="dispVar1();">
<input type="button" value="Altered" onclick="dispVar2();">

Of course you can use "something" + variable. Why would the order make a difference? — Barmar
– Barmar, Commented Feb 18, 2020 at 20:49
Basically, click on the [<>] tool in the toolbar to open the snippet editor. — Barmar
– Barmar, Commented Feb 18, 2020 at 20:51
plot twist, this question is actually about innerHTML and you should use p.textContent if you just add some text to it. Its more performant. — The Fool
– The Fool, Commented Feb 18, 2020 at 20:53

Tom O. · Accepted Answer · 2020-02-18 21:01:51Z

You can simply use the + assignment operator to concatenate strings. You can see in the example I am creating a variable newValue that concats your original variable plus some additional text:

var variable = "Variable";
var targetEl = document.querySelector('#target');

function dispVar1() {
  target.innerHTML = '';
  let p = document.createElement("p");

  p.innerHTML = variable;
  target.appendChild(p);
}

function dispVar2() {
  target.innerHTML = '';
  let p = document.createElement("p");

  const newValue = variable + ' (here\'s some added text)';
  p.innerHTML = newValue;
  target.appendChild(p);
}

<input type="button" value="Original" onclick="dispVar1();">
<input type="button" value="Altered" onclick="dispVar2();">
<div id="target"></div>

Alternatively, you can take advantage of String.prototype.concat to achieve the same thing - but MDN doesn't recommend it:

It is strongly recommended that the assignment operators (+, +=) are used instead of the concat() method.

According to this performance test, the assignment operators are several times faster.

Will · Accepted Answer · 2020-02-18 20:55:08Z

0

Your initial code works:

let alteredVar = variable + " that has been altered";

An alternative using template literals with placeholders is more fashionable than concatenation because it removes the necessity of escaping certain characters, is more flexible, and arguably more readable:

let alteredVar = `${variable} that has been altered`;

answered Feb 18, 2020 at 20:55

Will

7,1374 gold badges34 silver badges44 bronze badges

Collectives™ on Stack Overflow

How can I add content to an existing JavaScript variable?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related