I have some links on my page that create a new div and append it to an existing one.

The code that does it is along these lines:

$(existingPanelId).append('<div  id="' newpanelfullname '"><p>Content goes here.</p></div><div ><p><a href="#ex1" rel="modal:open" onclick="setpanellocation(' newpanelId '); return false;">Insert new div</a></p></div>');

This works fine when appending to divs that exist on the initial page load (ones written in the HTML) but fails when trying to append to a div that itself was created using append.

That sounds confusing, so here are the steps

1. Page loads, with existing div (call it “originalDiv”)
2. I click button to append a div (“newDiv”) to "originalDiv". This works, shows on the page, and I can see it in developer tools
3. I click another button to append another new div (“thirdDiv”) to “newDiv”. “thirdDiv” does not appear on the page.

I’m hoping someone has a suggestion of a way around this?

CodePudding user response：

Possibility 1:

It might be that existingPanelId is not updating properly. Try debugging it by simply printing it to console to check if the value is actually changing.

Possibility 2:

There might be something wrong with your CSS- the div elements may be hidden behind one another, possibly?

Otherwise:

It would be helpful if you posted a snippet of how it's currently working if these suggestions didn't help.

CodePudding user response：

When are you using querySelector or getElementById for the second div? If you do it before the button clicks, you'll get undefined because it doesn't exist yet. You should do it after the div is created. i.e. in the onClick function.

This is just a guess. It could be lots of other things. You should include any errors and more code.