CODEWITHSUNDEEP
jquery
MShack
MShack

Reputation: 652

jQuery replace existing div element with another

Here is the existing HTML

<div id="options_12" class="pagebody">
    <div id="contentframe">
        <div id="hsubmenu"></div>
        <div id="vsubmenu"></div>
        <div id="withmenus" class="withleft"></div>
        <div class="nflteampage"></div>
    </div>
</div>
<div class="pagefooter"></div>

I am unable to edit any of the HTML but i'm provided the use of jQuery , i want to remove the .pagefooter and replace it with .nflteampage

I tried this will no success

$( ".pagefooter" ).replaceWith( ".nflteampage" );

Upvotes: 0

Views: 300

Answers (3)

Ahab
Ahab

Reputation: 705

Try: 

$('.pagefooter').remove();

to remove the footer and

$('.nflteampage').insertAfter("#options_12");

to insert the new stuff after your options-div.

Upvotes: -1

Gabor
Gabor

Reputation: 560

As your replaceWith() currently stands, you're telling it to replace your .pagefooter element with a string literal, and not a selected element.

You'll have to go with:

$(".pagefooter").replaceWith($(".nflteampage"));

With the dollar sign at the beginning, you're telling jQuery to go and fetch that element, then the rest is as you would expect.

Upvotes: 3

Chris Morris
Chris Morris

Reputation: 983

You need to pass html code in the replace with, so you need to target the class and gets its html.

$( ".pagefooter" ).replaceWith( $(".nflteampage").html() );

working example here http://jsfiddle.net/dcfn4epn/1/

Upvotes: 0

Related Questions