Appending <span> tag separately to every Array value using Javascript

Question

This is my first JavaScript project and I am having some difficulties to append the <span> tag separately to each value of an array. Whatever I tried so far results in a single <span> tag. What could be an elegant solution using native JavaScript? Thanks in advance for any help.

let numbers = [1990, 1991, 1992];

let history = [];
let historyContainer = document.getElementById("output");
let para = document.createElement("p");
history.push(numbers.join(" "));
        
for (let k in history) {
	let text = document.createElement("span");
	let node = document.createTextNode(history[k]);
	text.appendChild(node)
	para.appendChild(text);
	historyContainer.appendChild(para);
}

	
<div id="output">
	</div>

Link to external jsfiddle

history.push(numbers.join(" ")); this line is why you are getting a single span tag, .join will join all number into 1 value so history is basically an array containing just 1 element — Karthik Ganesan
– Karthik Ganesan, Commented Dec 3, 2018 at 20:12

chazsolo · Accepted Answer · 2018-12-03 20:13:06Z

2

history.push(numbers.join(" ")); is your problem - by the time the loop runs history is an array with a single value of 1990 1991 1992 because of the join. In fact you don't even need history, just iterate over numbers

let numbers = [1990, 1991, 1992];
let historyContainer = document.getElementById("output");
let para = document.createElement("p");

for (let k in numbers) {
  let text = document.createElement("span");
  let node = document.createTextNode(numbers[k]);
  text.appendChild(node)
  para.appendChild(text);
  historyContainer.appendChild(para);
}

span+span {
  margin-left: 4px;
}

<div id="output"></div>

answered Dec 3, 2018 at 20:13

chazsolo

8,6541 gold badge25 silver badges45 bronze badges

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

3 Comments

Evan Bechtol Over a year ago

Beat me to it! I would even go 1 step further to suggest some syntactic adjustments; using const instead of let for historyContainer, para. This isn't a huge deal, but since you are not intending to modify those variables, it's better suited that they be constant. If you wanted to be extra-safe, you should also check that historyContainer is actually populated with the expected DOM element.

chazsolo Over a year ago

@EvanBechtol agreed! Since it wasn't related to solving the problem I left it alone, but great call out.

Squashkid Over a year ago

@chazsolo Thanks a lot, this works very well. Funny that the solution is actually quite easy ... I probably got lost in too much code.

Victor · Accepted Answer · 2018-12-03 20:18:57Z

0

If you want some simple and fast solution, try this:

var numbers = [1990, 1991, 1992],
  output = document.getElementById("output");

output.innerHTML = '<span>' + numbers.join('</span> <span>') + '</span>';

<div id="output"></div>

answered Dec 3, 2018 at 20:18

Victor

5,7992 gold badges29 silver badges29 bronze badges

Comments

Moumen Soliman · Accepted Answer · 2018-12-03 20:19:17Z

0

HTML:

<div id="output"></div>

JavaScript:

let numbers = [1990, 1991, 1992];

numbers.forEach(function(item) {
  var span = document.createElement("span");
  var text = document.createTextNode(item);
  span.appendChild(text);
  document.getElementById("output").appendChild(span);
});

CSS:

span {
  margin-right: 10px;
}

answered Dec 3, 2018 at 20:19

Moumen Soliman

1,6941 gold badge17 silver badges21 bronze badges

Comments

Mike · Accepted Answer · 2018-12-03 20:35:16Z

0

Try Following code :

let numbers = [1990, 1991, 1992];
let history = [];
let historyContainer = document.getElementById("output");
let para = document.createElement("p");
history.push(numbers.join(" "));
numbers.forEach(function(element){
  console.log(element);
    let text = document.createElement("span");
    let node = document.createTextNode(element);
  text.appendChild(node)
    para.appendChild(text);
  historyContainer.appendChild(para);
});

Expected HTML :

answered Dec 3, 2018 at 20:35

Mike

6156 silver badges16 bronze badges

Collectives™ on Stack Overflow

Appending <span> tag separately to every Array value using Javascript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related