Need Urgent Help -- Adsense ads are stacking on top of each other

[NickMNS]

I am using AJAX (XHR requests) to add content to a page. With each addition of content I add one more ad unit to the page. Each section added has plenty of content and graphics and so on, so an additional ad unit is warranted. The problem is that after each additional ad unit is added it loads a new ad above the ads that were already displayed with by previous injection.

I'm really freaking out now, because I have no idea how to solve this and I am afraid that I will get banned. On the other hand this likely explains that very strange stats that were being reported in AdSense since I made this change.

[NickMNS]

I would like to add some more info.

I am using amp-ads. This looks like it may be an amp bug. I was seeing some similarly strange behavior from my amp-carousels but I found a work around that didn't help in this instance. An element <i-amp-whatever...> was being added to each carousel. The element should normally be there but each subsequent AJAX request added another one. Changing the carousels to layout="fixed" "fixed" the problem. I assume because the padding was no longer required. But in this case the are "fixed" but still broken.

The ad unit that appears on the page with the initial page request (not AJAX) is not impacted by this. No ads are stacked on it. When i add the first AJAX request to the page, there is no issue the add displays fine. When the second AJAX request is added to the page, a new ad covers the ad added with the first AJAX request but none is added to the initial ad.

I have distinct ad units for each ad-slot and the new ad being added on top is a new request of that ad-slot.

[NickMNS]

Solved!

The issue was related to my use of document.innerHTML() which is similar to document.write(). This takes everything in the node and then overwrites it, which it turns out is not good. Now for some strange reason, it does not do that with some AMP elements. It can't "overwrite" so instead it writes on top of them. In other words it leaves what was initially there and simply paints new object on top. Thus leaving me with ads stacked one on top of the other.

I fixed the issue by using:

document.insertAdjacentHTML('beforeend', 'str')

Now lets see the impact on all my other ongoing issues!