Question 272857 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery how do I append to div, that doesn't exist at the beginging of a page

At a certain point a new div is created that did not exist on the page beforehand

document.getElementById("LightBoxNumber").innerHTML = "<div class="WinnerBanner">Congrats to all Winners!</div>";

from

<div id="LightBoxNumber" class="LightBoxShadow" style="font-size: xxx-large;"></div>

To

<div id="LightBoxNumber" class="LightBoxShadow" style="font-size: xxx-large;"><div class="WinnerBanner">Congrats!</div></div>

I would like to run a separate to append into that div at the moment it is created
i.e. create <span></span>

<div id="LightBoxNumber" class="LightBoxShadow" style="font-size: xxx-large;"><div class="WinnerBanner">Congrats!</div><span></span></div>

I have tested a few options and ways but cannot figure this out

$(document).ready(function(){
    $('.WinnerBanner').each(function(){
        if($(this).find('.WinnerBanner').length > 0){
            $(this).prepend('Yes!');
        }
    });
});

$(document).ready(function() {
    if( $('div.WinnerBanner').length > 0 ){
        $('#SelectNumbersBox').append('HHHHHHHHHHHH');
    }
    $('#SelectNumbersBox').append('DDDDDDDDDD');
});

$('body').change(function(event){
    if( $('div.WinnerBanner').length > 0 ){
        $('#SelectNumbersBox').append('HHHHHHHHHHHH');
    }
    $('#SelectNumbersBox').append('DDDDDDDDDD');
});
Tags:

2

Answers


  1. 0

    You can use a mutation observer to watch the parent div for changes and then run your code when it changes

    const div = document.getElementById("LightBoxNumber");

const config = {
  attributes: false,
  childList: true,
  subtree: true
};

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      mutation.target.querySelector('.WinnerBanner').prepend('Yes! ');

      // if you use your jquery you can do $(mutation.target).find('.WinnerBanner').prepend('Yes! ');

      //optional disconnect the observer after the change:
      observer.disconnect();
    }
  }

};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(div, config);


div.innerHTML = "<div class="WinnerBanner">Congrats to all Winners!</div>";
    <div id="LightBoxNumber" class="LightBoxShadow" style="font-size: xxx-large;"></div>
    Login or Signup to reply.
  2. 0

    You can use a MutationObserver to detect when the dynamic content is injected in to the DOM and make your own updates based on that event.

    Here’s a basic working example of how to do that:

    // Somewhere in another library, far, far away.
setTimeout(() => document.getElementById("LightBoxNumber").innerHTML = "<div class="WinnerBanner">Congrats to all Winners!</div>", 1000);

// in your codebase
const lightbox = document.querySelector('#LightBoxNumber');

const mutationConfig = { attributes: false, childList: true, subtree: false };
const mutationHandler = mutations => {
  for (const mutation of mutations) {
    if (lightbox.querySelector('.WinnerBanner')) {
      observer.disconnect(); // important to remove the observer, otherwise you'll end up in an infinite loop!
      
      // create your new element here...
      const span = document.createElement('span');
      span.textContent = 'This is your new dynamic content!';
      lightbox.append(span);
    }
  }
};
const observer = new MutationObserver(mutationHandler);
observer.observe(lightbox, mutationConfig);
    <div id="LightBoxNumber" class="LightBoxShadow" style="font-size: xxx-large;"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search