forEach does not apply to dynamically generated elements-CodePudding

I'm very sorry in advance to post nearly 170 lines of JS code but cutting it down does not replicate the issue at all. The issue must be somewhere within this JS code.

I generate content through arrays/objects. This works absolutely fine. However, I cannot use forEach to manipulate the content of spans even though they should be part of the DOM tree.

What am I missing here?

var language = document.documentElement.lang.toLowerCase();

/* ----- locailization_database.js ----- */
var DB_localization = [
  /* content */
  [
    [
      'DB_localization/content/text-block-2a',
      document.querySelector('#text-block-2'),
      'text',
      {
        de: `In Deutschland gibt es noch keine Gesetze, die artgerechte Haltung 
                     vorschreiben. Dennoch gibt es Richtlinien, nach welchen auch einige 
                     Veterinärämter handeln.`,
        us: 'not localized',
        en: 'not localized'
      }
    ],
    [
      'DB_localization/content/text-block-2b',
      document.querySelector('#text-block-2'),
      'tag',
      {
        de: '',
        us: '',
        en: ''
      },
      'br',
      ''
    ],
    [
      'DB_localization/content/text-block-2c',
      document.querySelector('#text-block-2'),
      'text',
      {
        de: `Die Tierärztliche Vereinigung für Tierschutz e.V. (TVT), das 
                     Bundesministerium für Ernährung und Landwirtschaft (BMEL) sowie der 
                     Sachkundenachweis für Kleinsäuger nach §11 Tierschutzgesetz, empfehlen ein 
                     Gehegemaß für alle Hamsterarten ab `
          /*<span ></span>
                               <span ></span>. */
          ,
        us: 'not localized',
        en: 'not localized'
      }
    ],
    [
      'DB_localization/content/text-block-2d',
      document.querySelector('#text-block-2'),
      'tag',
      {
        de: '',
        us: '',
        en: ''
      },
      'span',
      'minimum-surface-area'
    ],
    [
      'DB_localization/content/text-block-2e',
      document.querySelector('#text-block-2'),
      'tag',
      {
        de: '',
        us: '',
        en: ''
      },
      'span',
      'unit-lenght'
    ]
  ],

  /* measurement units */
  [
    [
      'DB_localization/units/lenght',
      document.querySelectorAll('.unit-lenght'),
      {
        de: 'cm',
        us: 'in',
        en: 'cm'
      }
    ],
    [
      'DB_localization/units/surface-area-A',
      document.querySelectorAll('.unit-surface-area-A'),
      {
        de: 'm²',
        us: 'not localized',
        en: 'm²'
      }
    ],
    [
      'DB_localization/units/surface-area-B',
      document.querySelectorAll('.unit-surface-area-B'),
      {
        de: 'cm²',
        us: 'ft²',
        en: 'cm²'
      }
    ],
    [
      'DB_localization/units/factor',
      document.querySelectorAll('.unit-factor'),
      {
        de: 'x',
        us: 'x',
        en: 'x'
      }
    ],
    [
      'DB_localization/units/minimum-surface-area',
      document.querySelectorAll('.minimum-surface-area'),
      {
        de: '100x50',
        us: '32x18',
        en: '100x50'
      }
    ],
  ]
];

/* ----- localization.js ----- */
window.addEventListener('load', function() {
  /* loading unique elements */
  for (let i = 0; i < DB_localization[0].length; i  ) {
    let DB_array_element = DB_localization[0][i][1],
      DB_array_type = DB_localization[0][i][2],
      DB_array_value = DB_localization[0][i][3][language];
    if (typeof DB_array_element !== 'undefined' &&
      typeof DB_array_type !== 'undefined' &&
      typeof DB_array_value !== 'undefined') {
      if (DB_array_type == 'text') {
        DB_array_element.insertAdjacentHTML('beforeend', DB_array_value);
      }
      if (DB_array_type == 'tag') {
        let DB_array_tag = DB_localization[0][i][4],
          DB_array_class = DB_localization[0][i][5];
        let new_ele = document.createElement(DB_array_tag);
        DB_array_element.appendChild(new_ele);
        if (DB_array_class !== '') {
          new_ele.setAttribute('class', DB_array_class);
        }
      }
      array_path = DB_localization[0][i][0];
    } else {
    }

    if (i   1 === DB_localization[0].length) {
      apply_units();
    }
  }

});

function apply_units() {
  /* applying the correct measurement units */
  for (let i = 0; i < DB_localization[1].length; i  ) {
    let DB_array_element = DB_localization[1][i][1],
      DB_array_value = DB_localization[1][i][2][language];
    if (typeof DB_array_value !== 'undefined' &&
      typeof DB_array_element !== 'undefined') {
      DB_array_element.forEach(el => el.insertAdjacentHTML('beforeend', DB_array_value));
      array_path = DB_localization[1][i][0];
    } else {
    }
  }
}

<!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Einstreu-Rechner</title>
</head>

<body>

  <main >

    <!-- ----- Section: Title ----- -->
    <h1 id="title"></h1>

    <!-- ----- Section: Description ----- -->
    <section id="description" title="Beschreibung über die Richtlininen des deutschen Standards">
      <p  id="text-block-1"></p>
      <p  id="text-block-2"></p>
      <h3  id="sub-title-1"></h3>
      <p  id="text-block-3"></p>
      <h4  id="sub-title-2"></h4>
    </section>

    <!-- More Content -->
    
    <p>This span works:</p>
    <span ><span>

CodePudding user response：

document.querySelectorAll('.unit-lenght') doesn't update when the DOM changes. Instead of calling querySelectorAll() when creating the array, put the selector in the DB_localization array and call querySelectorAll() when calling forEach().

var language = document.documentElement.lang.toLowerCase();

/* ----- locailization_database.js ----- */
var DB_localization = [
  /* content */
  [
    [
      'DB_localization/content/text-block-2a',
      document.querySelector('#text-block-2'),
      'text',
      {
        de: `In Deutschland gibt es noch keine Gesetze, die artgerechte Haltung 
                     vorschreiben. Dennoch gibt es Richtlinien, nach welchen auch einige 
                     Veterinärämter handeln.`,
        us: 'not localized',
        en: 'not localized'
      }
    ],
    [
      'DB_localization/content/text-block-2b',
      document.querySelector('#text-block-2'),
      'tag',
      {
        de: '',
        us: '',
        en: ''
      },
      'br',
      ''
    ],
    [
      'DB_localization/content/text-block-2c',
      document.querySelector('#text-block-2'),
      'text',
      {
        de: `Die Tierärztliche Vereinigung für Tierschutz e.V. (TVT), das 
                     Bundesministerium für Ernährung und Landwirtschaft (BMEL) sowie der 
                     Sachkundenachweis für Kleinsäuger nach §11 Tierschutzgesetz, empfehlen ein 
                     Gehegemaß für alle Hamsterarten ab `
          /*<span ></span>
                               <span ></span>. */
          ,
        us: 'not localized',
        en: 'not localized'
      }
    ],
    [
      'DB_localization/content/text-block-2d',
      document.querySelector('#text-block-2'),
      'tag',
      {
        de: '',
        us: '',
        en: ''
      },
      'span',
      'minimum-surface-area'
    ],
    [
      'DB_localization/content/text-block-2e',
      document.querySelector('#text-block-2'),
      'tag',
      {
        de: '',
        us: '',
        en: ''
      },
      'span',
      'unit-lenght'
    ]
  ],

  /* measurement units */
  [
    [
      'DB_localization/units/lenght',
      '.unit-lenght',
      {
        de: 'cm',
        us: 'in',
        en: 'cm'
      }
    ],
    [
      'DB_localization/units/surface-area-A',
      '.unit-surface-area-A',
      {
        de: 'm²',
        us: 'not localized',
        en: 'm²'
      }
    ],
    [
      'DB_localization/units/surface-area-B',
      '.unit-surface-area-B',
      {
        de: 'cm²',
        us: 'ft²',
        en: 'cm²'
      }
    ],
    [
      'DB_localization/units/factor',
      '.unit-factor',
      {
        de: 'x',
        us: 'x',
        en: 'x'
      }
    ],
    [
      'DB_localization/units/minimum-surface-area',
      '.minimum-surface-area',
      {
        de: '100x50',
        us: '32x18',
        en: '100x50'
      }
    ],
  ]
];

/* ----- localization.js ----- */
window.addEventListener('load', function() {
  /* loading unique elements */
  for (let i = 0; i < DB_localization[0].length; i  ) {
    let DB_array_element = DB_localization[0][i][1],
      DB_array_type = DB_localization[0][i][2],
      DB_array_value = DB_localization[0][i][3][language];
    if (typeof DB_array_element !== 'undefined' &&
      typeof DB_array_type !== 'undefined' &&
      typeof DB_array_value !== 'undefined') {
      if (DB_array_type == 'text') {
        DB_array_element.insertAdjacentHTML('beforeend', DB_array_value);
      }
      if (DB_array_type == 'tag') {
        let DB_array_tag = DB_localization[0][i][4],
          DB_array_class = DB_localization[0][i][5];
        let new_ele = document.createElement(DB_array_tag);
        DB_array_element.appendChild(new_ele);
        if (DB_array_class !== '') {
          new_ele.setAttribute('class', DB_array_class);
        }
      }
      array_path = DB_localization[0][i][0];
    } else {
    }

    if (i   1 === DB_localization[0].length) {
      apply_units();
    }
  }

});

function apply_units() {
  /* applying the correct measurement units */
  for (let i = 0; i < DB_localization[1].length; i  ) {
    let DB_array_element = document.querySelectorAll(DB_localization[1][i][1]),
      DB_array_value = DB_localization[1][i][2][language];
    if (typeof DB_array_value !== 'undefined' &&
      typeof DB_array_element !== 'undefined') {
      DB_array_element.forEach(el => el.insertAdjacentHTML('beforeend', DB_array_value));
      array_path = DB_localization[1][i][0];
    } else {
    }
  }
}

<!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Einstreu-Rechner</title>
</head>

<body>

  <main >

    <!-- ----- Section: Title ----- -->
    <h1 id="title"></h1>

    <!-- ----- Section: Description ----- -->
    <section id="description" title="Beschreibung über die Richtlininen des deutschen Standards">
      <p  id="text-block-1"></p>
      <p  id="text-block-2"></p>
      <h3  id="sub-title-1"></h3>
      <p  id="text-block-3"></p>
      <h4  id="sub-title-2"></h4>
    </section>

    <!-- More Content -->
    
    <p>This span works:</p>
    <span ><span>