How to join the values of two array plus some html code between them?

Question

I have these two arrays:

var numbers = ['one',  'two', 'three'];
var colors  = ['blue', 'red', 'white'];

Now I want this output:

$('.classname').html("<span id = 'one'>blue</span><span id = 'two'>red</span><span id = 'three'>white</span>");

How can I do that?

I can use join and mix second array with <span> but I cannot add id={arr1-values}:

$('.classname').html('<span>' + colors.join('</span><span>') + '</span>');

If you want to have a connection between the two arrays, better make them an object, or a Map — baao
– baao, Commented Feb 21, 2016 at 19:04
I'm a bit late to the party, but here's the jQuery'ish way -> jsfiddle.net/nf2jpnej — adeneo
– adeneo, Commented Feb 21, 2016 at 19:22
@adeneo Do you know a function like appendChild() but not append, I want replace, like html() ? — stack
– stack, Commented Feb 21, 2016 at 19:32
So why not just use html(), it's one of the few jQuery methods that replaces the content. — adeneo
– adeneo, Commented Feb 21, 2016 at 19:36

Oriol · Accepted Answer · 2016-02-21 19:30:38Z

5

If you want to avoid HTML injection, don't concatenate strings like that. Use DOM methods instead:

var numbers = ['one',  'two', 'three'],
    colors = ['red', 'green', 'blue'],
    target = document.querySelector('.classname');
target.innerHTML = ''; // Remove previous contents
numbers.forEach(function(id, i) {
  var el = document.createElement('span');
  el.id = id;
  el.textContent = colors[i];
  target.appendChild(el);
});

#one { color: red }
#two { color: green }
#three { color: blue }

<div class="classname"></div>

edited Feb 21, 2016 at 19:30

answered Feb 21, 2016 at 19:08

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

2 Comments

adeneo Over a year ago

Out of curiosity, how exactly does this "avoid HTML injection" ?

stack Over a year ago

This has a small problem ... My approach in the question uses .html but your approach always appends, I don't want that, I want to replace new html with current html ..

MysterX · Accepted Answer · 2016-02-21 19:08:50Z

1

Try to build HTML by iterating arrays:

var numbers = ['one',  'two', 'three'];
var colors  = ['blue', 'red', 'white'];
var resultHTML = '';
for(var i = 0; i < numbers.length; i++){
  resultHTML += '<span id = "'+ numbers[i] + '">' + colors[i] + '</span>'
}

$('.classname').html(resultHTML);

edited Feb 21, 2016 at 19:08

answered Feb 21, 2016 at 19:04

MysterX

2,3781 gold badge14 silver badges12 bronze badges

4 Comments

baao Over a year ago

As soon as one of the arrays has a different length, it'll fail

MysterX Over a year ago

@mmm the question was quite different

stack Over a year ago

@mmm In the most of cases the length of arrays are the same, but how to keep it safe if they weren't?

Pointy Over a year ago

@mmm the nature of the question implies that the arrays should be the same length

Nick · Accepted Answer · 2016-02-21 19:32:14Z

1

This is what you need:

var numbers = ['one',  'two', 'three'];
var colors  = ['blue', 'red', 'white'];

$.each(numbers, function(k, number) {
  $('.classname').append("<span id='"+ number +"'>"+ colors[k] +"</span>");
});

https://jsbin.com/tobozuliya/edit?html,js,output

answered Feb 21, 2016 at 19:32

Nick

1561 silver badge11 bronze badges

2 Comments

stack Over a year ago

I don't want .append(), please write html() instead

Nick Over a year ago

simply keep what I have inside append function in a variable with += and outside each, $('.classname').html(the variable that you have inside each);

Jagdish Idhate · Accepted Answer · 2016-02-21 19:09:37Z

0

Assuming colors and numbers are of same length, one liner.

numbers.map(function(elm,index){
  return '<span id='+elm+'>'+colors[index]+'</span>'
}).join();

As suggested by @mmm it would be better to have in object like

{
 number:'one'
 color:'blue'
}

answered Feb 21, 2016 at 19:09

Jagdish Idhate

7,7529 gold badges37 silver badges58 bronze badges

Comments

Zakaria Acharki · Accepted Answer · 2016-02-21 19:11:16Z

-1

It's better if you could use an object to make the relation between the two arrays e.g:

var colors = {one: 'blue', two: 'red', three: 'white'}

Then you can loop through the object and append the spans to the element :

$.each(colors, function(index,value){
    $('.classname').append("<span id="+index+">"+value+"</span>");
})

Hope this helps.

var colors = {one: 'blue', two: 'red', three: 'white'}

$.each(colors, function(index,value){
    $('.classname').append("<span id="+index+">"+value+"</span>");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="classname"></div>

edited Feb 21, 2016 at 19:11

answered Feb 21, 2016 at 19:10

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

6 Comments

Oriol Over a year ago

Objects have no order, though. Since OP uses arrays, I guess order is important.

Zakaria Acharki Over a year ago

@Oriol The OP don't refer to the Order.

stack Over a year ago

But I used one, two .. to show the ordering is important for me.. Sorry if I didn't mention it literally ..

Zakaria Acharki Over a year ago

Okay @stack that make since .. you should mention such informations in the OP.

charlietfl Over a year ago

@ZakariaAcharki don't blame OP...it's pretty clear that html output matches array order

|

Collectives™ on Stack Overflow

How to join the values of two array plus some html code between them?

5 Answers 5

2 Comments

4 Comments

2 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

2 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related