How to append to appended element through JQuery?

Question

My question is related more to why is this happening, not to knowing how to solve it.

I want to firstly append a <li> to a div and then an <a> to the <li>.

I have the following jQuery code:

$('.patches').empty();
for(i=0;i<patches.length;i++){
    $('.patches').append($('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    }));
    $('#li'+patches[i].name).append($('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    }));
    $('#a'+patches[i].name).append('Version : '+patches[i].version+' Author : '+patches[i].author);
}

The <li> is appended but the <a> isn't, why isn't this working?

EDIT: I have modified the code as follows and it works perfectly:

$('.patches').empty();
for(i=0;i<patches.length;i++){
    var listItem=$('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    });
    $('.patches').append(listItem);
    var aItem=$('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    });
    listItem.append(aItem);
    listItem.append('<p>Version : '+patches[i].version+' Author : '+patches[i].author+'</p>');
}

This version is almost the same as the previous one, I am just using variables. I would still like to know why the previous version of the code was not working. Could someone explain this?

Hmm. Just a question: Instead of using multiple append (one for the li, one for the a, one for the a content), can't you just use one append with the entire string you want like <li ...><a ...>...<></li>. Probably a bit ruder code for readability, but also probably more performant as well — PIIANTOM
– PIIANTOM, Commented Jul 5, 2017 at 13:12
maybe this is too quick for the element to be in the DOM. When you do this kind of things, you could use variables, so you don't need to use a selector to select from the DOM what you just created (or use Suresh Atta's answer method of chaining). For example var el=$('<li>'); $('.patches').append(el); el.append($('<a>')); — Kaddath
– Kaddath, Commented Jul 5, 2017 at 13:13
@PIIANTOM guess I could, but that would make it harder to modify anything if some elements change in my design. And the readability is something important for me) — dannemp
– dannemp, Commented Jul 5, 2017 at 13:14
Are you sure it is not working ? I created sample in JSFiddle and it seems to be working for me. Have a look at jsfiddle.net/vukv2ycy/2 — SpiderCode
– SpiderCode, Commented Jul 5, 2017 at 13:22

Suresh Atta · Accepted Answer · 2017-07-05 13:13:37Z

2

You are querying DOM before even appending to the DOM.

Append to li directly

for(i=0;i<patches.length;i++){
    $('.patches').append($('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    }).append($('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    })));
    $('#a'+patches[i].name).append('Version : '+patches[i].version+' Author : '+patches[i].author);
}

edited Jul 5, 2017 at 13:13

answered Jul 5, 2017 at 13:08

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

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

3 Comments

dannemp Over a year ago

This works, but what if I want to append something further in the code, why isn't the jquery selector working?

Suresh Atta Over a year ago

You are trying to select it before appending to the DOM.

dannemp Over a year ago

Could you please explain a little more in your answer why this is happening? When I do the debug the li is in the DOM by the time the appending of the a is called

Alessandro · Accepted Answer · 2017-07-05 13:41:35Z

You can create a link element and wrap it in a li tag, then append it to the list.

See following please:

$(document).ready(function(){
  let patches = [
    {name: "test1", downloadUrl: "/url1", version: 1, author: "Alessandro"},
    {name: "test2", downloadUrl: "/url2", version: 2, author: "Alessandro"}];
  $('.patches').empty();
  for(i=0;i<patches.length;i++){
      let link = $('<a>',{
          href:patches[i].downloadUrl,
          text: 'Version : '+patches[i].version+' Author : '+patches[i].author,
          id:'a'+patches[i].name
      }).wrap("<li></li>").parent();
      $('.patches').append($(link, {
          id:'li'+ patches[i].name,
          class: 'list-group-item'
      }));
  }
});

$("#btnAdd").click(function(){
  $("#atest2").append(";\tSome new information");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAdd">Add something to second element</button>
<ol class="patches"/>

If you want to refer to a specific link element you could use its id, like:

$("#atest2").append(";\tSome new information");

I hope it helps you, bye.

Bhavana · Accepted Answer · 2017-07-05 13:13:53Z

0

These elements are dynamically created. So, you need to call something like this

$(document).on('event', '.class-name', function(){
    // code
});

answered Jul 5, 2017 at 13:13

Bhavana

1,0744 gold badges17 silver badges28 bronze badges

Comments

dannemp · Accepted Answer · 2017-07-05 13:14:51Z

-1

Modify your logic to first add <a> tag to the <li>, and then add that <li> tag to the <div>...

edited Jul 5, 2017 at 13:14

dannemp

1,0291 gold badge17 silver badges33 bronze badges

answered Jul 5, 2017 at 13:09

Suresh Kaushik

777 bronze badges

Collectives™ on Stack Overflow

How to append to appended element through JQuery?

4 Answers 4

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Related