Paul Walker Paul Walker - 2 months ago 10
HTML Question

List Button Names in a div

I have a div that contains buttons generated by JavaScript. The reason for this is that a user selects an item from the left column, a button containing the name of the item is added to the right (kind of like a shopping cart). If you click the button on the right the button is removed.

Div filled with some buttons looks like this:



<div id="controllist2" style="position: fixed; padding-left: 10px;">
<button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
<button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
<button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
<button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
<button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
<button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
</div>





Is there a way to iterate through this div, get all the button html text and append them to a label?

I've looked around for a few hours and I can not find a good starting place.

Answer

name of button ? Did you meant html from button ?

var label_text = '';
$('#controllist button').each(function(){
  label_text += $(this).html();
});

$('#controlllist').append('<label>'+label_text+'</label>');