Access children element I'm appending with JQuery

Question

Is there a reason I can't access the children() element I'm appending?

This code adds default color blue color to all tags on this question page.

$(document).ready(() => {
  $.each($('li.d-inline.mr4.js-post-tag-list-item'), function() {
    const e = $(this);
    const h = `<span id="span1">default color <span id="span2">blue color</span></span>`;
    var el = e.find('#span1');
    
    if (el.length === 0) {
      e.append(h);
      el.children().css({
        'color': 'blue',
        'font-style': 'italic',
        'font-weight': 'bold'
      });
      
      console.log.apply(console, el);
    }
  });
});

<!-- put some HTML here, please -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

1 problem, if you have multiple `li` elements then you insert multiple elements with the same id, aka span1 and span2 — Carsten Løvbo Andersen, Mar 23 '23 at 13:10
As far as I know it is not forbidden. Many pages create multiple elements with the same id. Try `#metadata-line` on YouTube search page. — Neret, Mar 23 '23 at 13:14
Neret Id should always be unique. If you run $("span1") it would always target the first element with the id, never others. — Carsten Løvbo Andersen, Mar 23 '23 at 13:15
[IDs must be unique](https://stackoverflow.com/a/9454716/1264804). It's invalid HTML to do otherwise. There's no need to use an ID anyway. You can reference a class by traversal. — isherwood, Mar 23 '23 at 13:25
Protip: One-letter variable names will not make you any friends. Name them semantically. — isherwood, Mar 23 '23 at 13:29
Please put some HTML and your script in a demo snippet using the editor. I'm not clear on what you're doing with `h`. Does `#span1` already exist in the page elsewhere? — isherwood, Mar 23 '23 at 13:32
@isherwood I'm appending HTML `h`. `#span1` does not exist anywhere else on the page. — Neret, Mar 23 '23 at 13:36
Then `var el = e.find('#span1');` doesn't make much sense. Please do as I asked so we have something clear to discuss. Otherwise I can't help. — isherwood, Mar 23 '23 at 14:03

score 2 · Answer 1 · answered Mar 23 '23 at 13:14

Problem is that even after appending your new element (h), then your variables haven't updated. So after the append do:

el = e.find('#span1');

as in:

e.append(h);
el = e.find('#span1'); // <- you need to update the variable.

Demo

!function() {
  "use strict";

  $(document).ready(() => {
    $.each($('li.d-inline.mr4.js-post-tag-list-item'), function() {
      const e = $(this);
      const h = `<span id="span1"><span id="span2">999</span></span>`;
      var el = e.find('#span1');
      if (el.length === 0) {
        e.append(h);
        el = e.find('#span1');
        el.children().css({'color': 'blue', 'font-style': 'italic', 'font-weight': 'bold'});
        console.log.apply(console, el);
      }
    });
  });
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="d-inline mr4 js-post-tag-list-item"></li>
</ul>

I want `#span1` to be the default color and `#span2` to be blue. — Neret, Mar 23 '23 at 13:19
Thanks for the help, I didn't know the id must be unique. I found what the problem was. After appending html `e.append(h)` you need to re-find the element `el = e.find('#span1')` and its `el.children()`. — Neret, Mar 23 '23 at 13:55

Access children element I'm appending with JQuery

1 Answers1