Add span tag to each element in an array in Javascript?

Question

Suppose that I have an array. How can I wrap each element in the array in a span tag? Also, if I want to .appendchild each span element to a div element, how can I do it?

 function add_span(arr){  
     var new_arr= document.createElement("span");// arr is passed in correctly 
     var text=document.createTextNode(arr); // text cannot be output
     new_arr.appendChild(text);
     return new_arr;
 }

and in the main:

 for (i = 0; i < unique_array.length; i++)
 { 
     span_array[i]=add_span(unique_array[i]);
 }
 var cloud_text=document.createTextNode(span_array);
 cloud.appendChild(cloud_text);

the output now looks like this: [object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLSpanElement]

This question appears to be off-topic because it does not show the questioner put any effort into answering the question for her/his self. — Rich Schuler
– Rich Schuler, Commented Nov 14, 2014 at 19:06
Isn't an array of HTMLSpanElements what you were looking for? — Xenyal
– Xenyal, Commented Nov 17, 2014 at 5:30

Xenyal · Accepted Answer · 2014-11-14 19:02:07Z

2

JSFiddle Example (Updated)

Assume that you have an array of strings:

var arrayExample = ["apple", "orange", "pear"];

Iterate through each string within the array:

arrayExample.forEach(main);

Append the array string item into a span object, and then into a div object:

Edited

function main(arrayItem, index, array) {
    var spanObj = "<span>" + arrayItem + "</span>"
    var divObj = document.createElement('div');
    divObj.innerHTML = spanObj;

    // Do something like:
    document.body.appendChild(divObj);

    // Replace old array string with new array string wrapped in <span>
    arrayExample[index] = spanObj
}
alert(arrayExample); // will output your new Array

edited Nov 14, 2014 at 19:02

answered Nov 14, 2014 at 18:16

Xenyal

2,2232 gold badges30 silver badges52 bronze badges

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

5 Comments

YING L Over a year ago

I am not sure why but I keep getting the tags in my output. function span_c(arr){ arr=""+arr+""; return arr; } // and in the main : for (i=0;i<unique_array.length;i++){ unique_array[i]=span_c(unique_array[i]); }

Xenyal Over a year ago

It says in your question that you want the output to be wrapped in a span. What is desired return for arr?

YING L Over a year ago

more accurately I want to wrap each element in the array in a span

Xenyal Over a year ago

So say you have array = ["1", "2"]. You're trying to turn the array into array = ["1", "2"]?

Xenyal Over a year ago

Have you seen the Fiddle example? Add a debugger; line in the code and update -> You can step through the function and see exactly what each step does.

DrRoach · Accepted Answer · 2014-11-14 23:19:35Z

0

You want to loop through all of the array elements and add span tags to the beginning and end like so:

var example = [];

for(var i = 0; i < example.length; i++) {
    example[i] = '<span>' + example[i] + '</span>';
}

This adds the html span tags to your text and then your array element inside. The i acts as the identifier for which array object you are moifying.

edited Nov 14, 2014 at 23:19

answered Nov 14, 2014 at 17:26

DrRoach

1,3569 silver badges16 bronze badges

4 Comments

Barranka Over a year ago

Please add some explanation to your answer. Code-only answers are sometimes good enough, but code+explanation answers are always better

YING L Over a year ago

When I do this, it makes it a string, right? then when I display it, is should something like apple . Apparently, I do not want to display.

DrRoach Over a year ago

@Barranka Thanks, I was in a rush but I've updated now.

DrRoach Over a year ago

@YINGL Yes it will make it a string but because  is a HTML tag, you won't see it outputted to your screen.

Collectives™ on Stack Overflow

Add span tag to each element in an array in Javascript?

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related