javascript - .after() is omitting some children divs

Question

I'm using .after() method to inject some html code, I'm doing it inside a loop, everything was working fine. Then I added a div parent to some divs and for some reason the children of those container divs are missing.

const setContent = (sections) => {
  let contentElements = sections.map(section => `
    <div id="${section.key}_section" class="anchor-tag section-tag">
      <div id="${section.key}_section_content">
        <div class="subsection-group">
          <div id="${section.key}_first_parent_div">
            <div id="${section.key}_first_child_div"></div>
            <div id="${section.key}_second_child_div"></div>
          </div>
          <div id="${section.key}_second_parent_div">
            <div id="${section.key}_first_child_div"></div>
            <div id="${section.key}_second_child_div"></div>
          </div>
          <div id="${section.key}_outer_alone_child"></div>
        </div>
        <div>
          <div id="${section.key}_other_uncle"></div>
          <div id="${section.key}_other_aunt"></div>
        </div>
      </div>
    </div>
  `).join("");
  $('#div_before').after(`${contentElements}`);
};
setContent(sectionsArr);

If I console.log(contentElements) everything is there, but for some reason after mouting the elements, both _first_child_div and _second_child_div are missing. All sections (divs id="${section.key}_section) that have lost child start with style="display: none;", I don't know how to debug it, and I couldn't find anything on .after() api that could relate to that issue

question from:https://stackoverflow.com/questions/65909820/after-is-omitting-some-children-divs

Answer 1

Waitting for answers