Retrieve the appended element's object

I am currently facing an issue with accessing elements that are automatically added by a library in my code. In my HTML, I have the following line:

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

The library appends some elements within this <div>. When inspecting the DOM, it looks 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 have tried to access the <ul></ul> element using various methods, but nothing seems to work:

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

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

My ultimate goal is to insert 

<span class="icon-close"></span>
within each <li></li> element upon page load.

javascriptjqueryhtmlcss

Answer №1

To locate the ul element and iterate through its children, utilize the JQuery find method. Insert your script after all library scripts have been loaded.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checking whether the mouse is hovering using jQuery

Can someone assist me with implementing jQuery to check if the mouse is over an element? I am looking for something similar to the navigation on . This is the HTML code I have: <div id="main_nav"> <ul> <li href="#tab1">Nav Tab 1& ...

jquery

Is it possible to style a nested ID with CSS?

Imagine a scenario where you are working within an HTML file that you cannot modify, but you have the ability to only edit the CSS through a stylesheet. Is it possible to target an ID within another ID in the same way you can do with classes? #id1 #id2 {s ...

htmlcsscss-selectors

The empty string is not getting recognized as part of an array

Currently, I have a textarea field where pressing enter submits and creates a new item in the array. Pressing shift + enter creates a new line in the textarea input field. But when trying to submit by pressing shift and enter after creating a new line, it ...

javascripthtmlcssreactjs

Unable to scroll down an overlay window using Selenium with Python

When using Quora, I am trying to scroll to the bottom of the window that appears when I click on the "View upvoters" button in order to access all the names of those who have upvoted. However, the code for scrolling down a standard browser window doesn&apo ...

pythonhtmlseleniumweb-scrapingquora

Revitalize a section of the webpage following a user's successful login on ASP.NET MVC4

This is the Index view of the Home controller @{ ViewBag.Title = "Index"; } @if (Request.IsAuthenticated) { @Html.Partial("_UserIsAuthenticated") @Html.Partial("~/Views/Task/_Tasks.cshtml") } else { @Html.Partial("_UserIsNotAuthenticated" ...

jqueryajaxasp.net-mvcasp.net-mvc-4

finding and retrieving every occurrence of the select directive and its corresponding selected values in Angular

I recently set up a chosen dropdown in my project using the following method. I added a select box with a "chosen" directive as an attribute to update and initialize a list, along with an ng-model on the select element. <select id="{{$index+1}}" class= ...

javascriptjqueryangularjs

Exploring the power of Angular Js $httpParamSerializer alongside jQuery's $.ajax

Currently, I am in the process of developing an Angular.js application where I need to send a POST request to a PHP server. The data that needs to be transmitted is in the format of nested objects. Here is an example of the data structure: var data = { ...

javascriptphpjqueryajaxangularjs

Is it possible to rearrange an array by moving an element to the front

If I have an array as shown below, how can I move key [2] and its corresponding value to the front of the array? This would make it key [0] and increment the other keys by 1. Current: [0] => Array ( [name] => Vanilla Coke cans 355ml x 2 ...

phphtmlarrays

The issue of "undefined is not a function" is arising when trying to use the session in NHibernate with a mongo store

In my MongoDB database, I have a collection named 'Sessions' within the 'SessionStore' to store session state. To manage sessions, I am using express-session. Below is the code snippet used to set up sessions: var session = requi ...

javascriptnode.jsexpress-sessionconnect-mongo

Steps to obtain the precise source code of a webpage

Is there a way to download the exact source code of a webpage? I have tried using the URL method and Jsoup method, but I am not getting the precise data as seen in the actual source code. For example: <input type="image" name="ctl00$dtlAlbums$ct ...

javascriptjavahtmlcssjsoup

Experiencing challenges accessing information from the useEffect hook in React

I'm facing some issues with my useEffect hook and I can't seem to figure out why it's not working. I've been trying to make a call to an endpoint, but it seems like I'm not getting any response back. Any help would be greatly appr ...

javascriptreactjsjsonreact-hooksuse-effect

QuickSearch displayed at the center with a floating left alignment

I have been trying to center a QuickSearch div with multiple Q & A sections, but I am having no success. The div is floated to the left and has a background image. HTML <div class="l-row"> <div class="QuickSearch"> <div class="loop"& ...

htmlcss

Unraveling the mysteries of webpack configuration

import * as webpack from 'webpack'; ... transforms.webpackConfiguration = (config: webpack.Configuration) => { patchWebpackConfig(config, options); While reviewing code within an Angular project, I came across the snippet above. One part ...

javascriptangulartypescriptwebpackbrowser

How does the use of let versus const differ when iterating through a collection?

Utilizing Node.js (ES6) to iterate through each item in a collection like the one provided below: var statuses = [{ statusId: 1, description: 'New' }, { statusId: 2, description: 'Pending' }, { ...

javascriptnode.jsecmascript-6

Ways to efficiently transmit pre-designed HTML components from a WebMethod to jQuery

I'm currently working on implementing infinite scrolling on my ASP.NET C# Website. In the past, I used a somewhat cumbersome method involving the ListView Control to achieve lazy scrolling, but I'm looking for a more efficient solution this time. ...

c#javascriptjqueryasp.netsql

When I modify the state in Vue.js, the two-way binding feature does not seem to function properly

I'm facing an issue with my dynamic array "slots" of objects which looks something like this: [{"availability": 1},{"availability": 3}] I render multiple inputs in Vue.js using v-for like so: <div v-for="slot in array"><input v-model="slot.av ...

javascriptvue.jsvue-reactivity

The Google Drive API in Node.js is notifying the deletion of files

I encountered an issue with the Google Drive API in my application. Even after deleting files from Google Drive, the listfiles function still returns those deleted files. Is there a solution to prevent this from happening? Below is the function of my API: ...

javascriptnode.jsrestexpressgoogle-drive-api

Arranging Typescript strings in sequential date format

Looking for guidance on how to sort string dates in chronological order, any expert tips? Let's say we have an array object like: data = [ {id: "1", date: "18.08.2018"} {id: "2", date: "05.01.2014"} {id: "3", date: "01.01.2014"} {id: ...

javascripttypescript

Setting the state to an array of objects in React: A beginner's guide

Currently, I am developing a flashcard application using React. To store the data entered by the user, I have initialized my state as an array of objects that can hold up to 10 terms and definitions at a time: state = { allTerms: [ { ...

javascriptarraysreactjsobjectsetstate

Discovering the content within table cells by utilizing JavaScript functions linked to specific IDs

I am currently working on a project that involves a dropdown list: <select id="itemsList" onchange="gettingList()"> <option>Please choose an option</option> <option value="50">Shampoo</option ...

javascripthtmlcssfunctionhtml5-canvas