How can I add a '<input type="checkbox" checked>' attribute to all li dyna-CodePudding

I am trying to create an accordion from my unordered list items from the demo here: https://codepen.io/abergin/pen/BaKVWd it's really simple and just what I need, however I need to be able to attach a - <input type="checkbox" checked> value to all my li elements. I do not have access to the HTML.

The list is displayed inside a bootstrap modal iframe...

<div ><iframe id="researchiframe" name="display-frame" style="width:100%;height:600px;"></iframe></div>

My list code is below.

<ul id="result_details" style="padding:0px">
// li elements are created dynamically here//
</ul>

I'm not sure how to do this.

CodePudding user response：

You will need to loop through all <li> elements. Then you could use append() to add the HTML you want after each <li> tag.

$('ul#result_details li').each(function(index) {
  $(this).append('<input type="checkbox" checked>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="result_details" style="padding:0px">
  <li></li>
  <li></li>
  <li></li>
</ul>