jQuery build html add loop

Question

Hi what i have is this.

var items = new Array('1','2','3','4','5');
var img = $('<div>',{'id':'slider'});
$.each(items,function(index,src){     
    var li = $('<img>',{src});        
    img.append(li);      
    });
$('body').append(img);

Which create.

<div id="slider">
  <img src="1">
  <img src="2">
  <img src="3">
  <img src="4">
  <img src="5">
</div>

What i am struggling with is to add a tag "figure" and "alt".
So it should look like this.

<div id="slider">
  <figure>
    <img src="1" alt="">
    <img src="2" alt="">
    <img src="3" alt="">
    <img src="4" alt="">
    <img src="5" alt="">
  </figure>
</div>

Tushar · Accepted Answer · 2015-06-17 10:12:37Z

1

You can use attr() to set attribute on elements.

var items = new Array('1', '2', '3', '4', '5');
var img = $('<div>', {
    'id': 'slider'
});
$.each(items, function (index, src) {
    var li = $('<img />').attr({
        src: 'SRCHERE',
        alt: 'TEXT'
        // ^^^^^^^^
    });

    img.append(li);
});
$('body').append(img);

Demo

answered Jun 17, 2015 at 10:12

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

2 Comments

Tushar Over a year ago

@JeremyC. That's what the jQuery does

snippsat Over a year ago

Nice,but you are missing "figure" tag.No problem i have got answer under.

Milind Anantwar · Accepted Answer · 2015-06-17 10:17:38Z

0

Use:

 var div = $('<div>',{'id':'slider'});
 var figure=$('<figure>');
 $.each(items,function(index,src){     
  var li = $('<img>', {
  src: src,
  alt: 'test'
 });        
 figure.append(li);      
});
$('body').append(div.append(figure));

Working Demo

answered Jun 17, 2015 at 10:17

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Nikhil Pareek · Accepted Answer · 2015-06-17 10:26:27Z

0

why don't try try this

var items = new Array('1','2','3','4','5');
var img = $('<div>',{'id':'slider'});
var figure = $('<figure>');
$.each(items,function(index,src){     
    var li = $('<img>',{src});
    li.attr('alt', '');        
    figure.append(li);      
    });
img.append(figure);
$('body').append(img);

answered Jun 17, 2015 at 10:26

Nikhil Pareek

7642 gold badges9 silver badges25 bronze badges

Comments

Arun P Johny · Accepted Answer · 2015-06-17 10:43:58Z

0

You can

var items = new Array('1', '2', '3', '4', '5');
var img = $('<div>', {
    'id': 'slider'
});
var $fig = $('<figure />').appendTo(img)
$.each(items, function (index, src) {
    var li = $('<img>', {
        src,
        alt: ''
    });
    $fig.append(li);
});
$('body').append(img);

answered Jun 17, 2015 at 10:43

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

jQuery build html add loop

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related