JQUERY - Building HTML with list variable

Question

how to create Building HTML with list variable...

this my code error...

html

<div class="demo">
  <!-- append code -->
</div>

css

.demo_btn_btn1 {
   color :red;
}

.demo_btn_btn2 {
   color :blue;
}

.demo_btn_btn3 {
   color :orange;
}

jQuery code

$(function(){
var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'],
    html = [];
    html = $('<button class="demo_btn_' + cls + '"><span>' + txt + '</span></button>');
  $(".demo").append(html);      
});

and this output my code

<div class="demo">
  <button class="demo_btn_btn1,btn2,btn3">
  <span>button1,button2,button3</span></button>
</div>

And i want this...

<div class="demo">
  <button class="demo_btn_btn1"><span>Button1</span></button>
  <button class="demo_btn_btn2"><span>Button2</span></button>
  <button class="demo_btn_btn3"><span>Button3</span></button>
</div>

Please help me, thank you in advance

Possible duplicate of Clearest way to build html elements in jQuery — BravoZulu
– BravoZulu, Commented Jun 18, 2017 at 2:50

A. L · Accepted Answer · 2017-06-18 02:41:43Z

1

The thing is, you're putting all the content together into a single button, which is why it's showing up as a single element.

You need to loop over the things and assign each element like below.

$(function(){
var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'],
    html = [];
    for (let i = 0; i < 3; i++)
    {
      html = $('<button class="demo_btn_' + cls[i] + '">' + txt[i] + '</button>');
      $(".demo").append(html);
    }
          
});

.demo_btn_btn1 {
   color :red;
}

.demo_btn_btn2 {
   color :blue;
}

.demo_btn_btn3 {
   color :orange;
}

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

answered Jun 18, 2017 at 2:41

A. L

12.7k29 gold badges100 silver badges179 bronze badges

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

Comments

Zachary Weixelbaum · Accepted Answer · 2017-06-18 02:41:29Z

0

In order to do what you want, you would have to loop through the array one at a time, so what you can do is:

$(function(){
var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'],
    for (var i = 0; i < 3; i++) {
        $(".demo").append(
            $('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>')
        );
    }     
});

answered Jun 18, 2017 at 2:41

Zachary Weixelbaum

9141 gold badge12 silver badges24 bronze badges

Comments

Mohamed-Yousef · Accepted Answer · 2017-06-18 02:43:44Z

0

You can simply use .each() to loop through array .. and += to html then use .html() after loop

$(function(){
  var html = '';
    cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'];
  $.each(cls , function(i){
    html += '<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>';
  });
  $(".demo").html(html);      
});

.demo_btn_btn1 {
   color :red;
}

.demo_btn_btn2 {
   color :blue;
}

.demo_btn_btn3 {
   color :orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">
  <!-- append code -->
</div>

answered Jun 18, 2017 at 2:43

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Comments

nav_grl_onrails · Accepted Answer · 2017-06-18 02:47:36Z

0

Try using a loop, and create new html elements based on the index of cls and txt. Posting from my phone, so apologies if the formatting is messed up.

$(function(){
    var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'];
    for (var i =0; i < cls.length; i++){
       var html = $('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i]+ '</span></button>');
       $(".demo").append(html);      
   }
});

answered Jun 18, 2017 at 2:47

nav_grl_onrails

565 bronze badges

Comments

Bla... · Accepted Answer · 2017-06-18 02:52:11Z

0

I would use for loop for this case.

var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'];

for (var i = 0; i < cls.length; i++) {
    $(".demo").append('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>');
}

.demo_btn_btn1 {
   color :red;
}

.demo_btn_btn2 {
   color :blue;
}

.demo_btn_btn3 {
   color :orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">
  <!-- append code -->
</div>

edited Jun 18, 2017 at 2:52

answered Jun 18, 2017 at 2:41

Bla...

7,2887 gold badges30 silver badges47 bronze badges

Collectives™ on Stack Overflow

JQUERY - Building HTML with list variable

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related