将元素从包含div移到另一个div

Question

Im building a wordpress site which has a custom Tiny MCE style added to it, it gives the user a pre styles 'More' button containing an anchor, that goes at the bottom left of the post. The more button is formatted like this

<p><span class="moreButton"><a>Link here </a></span></p>.

My problem is styling the boxes to be dynamic in size, regardless of how much text is inside them and because the more button style is being inputted through a wordpress post, it is contained in a div that I cant seem to free it from.

All in all it looks like this:

<div class="newsBoxMore">
        <div class="newsBoxMainHolder">

        <div class="alumniHeading newsMainHeading">
        <h4>21 Years of NCCA Masters</h4>
        </div>

        <div class="alumniContent newsMainContent">
                    <p>As a reminder of where we started out this example from 1990 won a special award at the CG90 Festival.</p>
<p>Text in here.</p>
<p><span class="moreButton"><a title="Video" href="" target="_blank">View Here</a></span> </p>

        </div><!-- end newsMainContent -->

        <div class="newsDateHolder">
            <p>POSTED: 16.06.13</p>
        </div><!-- end newsDateHolder -->

        </div><!-- end newsBoxMainHolder -->

    </div><!-- end news Box More -->

What i am trying to do is move

<p><span class="moreButton"></span></p> 

out of the newsMainContent div and i want it to sit under it, just above the newsDateHolder div. I have tried using the following code :

$(".newsMainContent span").insertAfter($(".newsMainContent"));

The problem with this is that it duplicate the moreButton class with every anchor thats on the page. so i end up with a post that should have one moreButton but it now has 10 because the page is showing 10 posts.

Any help will be greatly appreciated!!

Answer 1

You need to give the element you want it to be after a unique ID, and use that instead of the class.