Sometimes, things don’t make sense on the surface until you dig deeper.  Don’t worry, no one knows everything in their particular profession, and I am know exception.  A client of ours uses “OpenX” to manage their ads.  This ad delivery framework is pretty straightforward, but what happens if you are delivering ads into a CMS like WordPress from the OpenX framework API and all you want to do, depending on the type of page, post, or feed to dynamically move the ad banner to the ideal position within the content?

For instance, this client wanted all ads in posts to show up at the bottom of short posts or the third paragraph down of those longer than 3 paragraphs.  You don’t want your content writers to have to worry about placing ad snippets within their posts, that would be a lot of extra work riddled with many potential issues for workflow and be very counter productive.

I though my solution was simple, so I’ll explain what I first set out to do before I realized there was even a simpler solution.  My goal was to make sure all ads were delivered within a div tag that I could assign a specific class, say “openx-ad”, then, upon loading, I had a fancy jQuery script that could identify any openx-ad class then I would grab the html via

jQuery(".openx-ad").each(function(){  ad_html=jQuery(this).html();});

then after grabbing the html I would then remove the ad via:

jQuery(this).remove();

After cleaning the page and storing the ad into memory, I would then find the proper div to insert the html into by:

jQuery(".post-content p:nth-child(3)").after(ad_html);

Of course, the actual selector was a little more complicated than using “nth-child(3)” but you get where I’m going with this.  The problem came from the fact that moving elements  in your web page that were completely loaded in the DOM already can’t be cut and pasted somewhere into the DOM — the script will actual run again and the browser will execute it twice.  This caused all sorts of issues.  The solution came with “prependTo”, instead of doing all this cutting and pasting of html from one div into another, all you need is the source of what you want moved and a selector to tell it where to move it to.  In this case,

jQuery(".openx-ad").prepentTo(".post-content p:nth-child(3)");

was the only line needed to successfully move elements so any script tags within would not execute.  Yes, I could have removed the <script> </script> tags before moving, but often you will not want to remove behaviors.  “appendTo” would move the element to the point after the selector, in case any of you were wondering.