Inject various JavaScript data into different div containers

Question

The issue at hand is quite straightforward.

Here is a sample for displaying a single variable in a div with the "container" ID:

let first = 5;
document.getElementById('container').innerHTML = first; 

<div id="container"></div>

However, I am interested in achieving this for multiple variables or signs like this:

let first = 5; 
let second = 10; 
document.getElementById('container').innerHTML = first "+" second; 

<div id="container"></div>

What would be the best approach to make this work?

Answer 1

Answer №1

Try using template literals for a cleaner way to interpolate values in JavaScript:

let num1 = 5; 
let num2 = 10; 
document.getElementById('output').innerHTML = `${num1} + ${num2}`;

<div id="output">

</div>

Answer 2

Try using template literals for a cleaner way to interpolate values in JavaScript:

let num1 = 5; 
let num2 = 10; 
document.getElementById('output').innerHTML = `${num1} + ${num2}`;

<div id="output">

</div>

Answer 3

To complete the task, you can utilize the join function in this manner:

["1","2","3"].join("+")

Following your provided example:

document.getElementById('container').innerHTML = [first,second].join("+");

This approach ensures compatibility across all web browsers

Answer 4

To complete the task, you can utilize the join function in this manner:

["1","2","3"].join("+")

Following your provided example:

document.getElementById('container').innerHTML = [first,second].join("+");

This approach ensures compatibility across all web browsers

Answer 5

Transform your data into an array structure

let data = [5, 6, 7, 8];

// merge the elements by using array method
document.getElementById('output').innerHTML = data.join('*');

Answer 6

Transform your data into an array structure

let data = [5, 6, 7, 8];

// merge the elements by using array method
document.getElementById('output').innerHTML = data.join('*');