Access the object of appended element

Question

I'm trying to access the elements that are appended by a library that I use in my code, but I can't access them. I have this line in my html.

<div class="bonds" id="original" style="display:block;"></div>

The library that I use will append some elements in here. So from the DOM inspector, it shows something like this.

<div class="bonds" id="original" style="display:block;">
    <!-- append start -->
    <div class="FL-main fieldsLinker">
        <div class="FL-left">
            <select></select>
            <ul>
                <li data-offset="0"></li>
                <li data-offset="1"></li>
                <li data-offset="2"></li>
            </ul>
        </div>
    </div>
    <!-- append ended -->
</div>

I'm trying to access the <ul></ul> element using the methods below but nothing works.

1. $('#original').children().children().children();

2. var original = $('#original').find('ul');

My goal is to append <span class="icon-close"></span> in each of <li></li> element when the page is loaded.

Answer 1

You could use JQuery find method to find the ul and loop over it's children. Add your script at the end of all scripts. (library scripts).

$('#original').find('ul li').each(function(i) {
   $(this).append('<span class="icon-close"></span>');
});