jQuery replace existing div element with another

Question

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" );

To be fair, typing in a quick one-liner takes considerably less time than an answer which also tries to add to the code-snippet why it actually would work (that being said, I actually saw your comment after I've already submitted my answer). Also, the placeholder right in this box says the comments should serve for acquiring more info from the OP about the question and answering (be it any length, and regardless the question's complexity) should be avoided. The ori. question contained some amount of proof of attempts done and not just a "how do I this"-type - I'd say the question was alright. — Gabor
– Gabor, Commented Sep 1, 2014 at 13:52

Gabor · Accepted Answer · 2014-09-01 13:39:39Z

3

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.

answered Sep 1, 2014 at 13:39

Gabor

5603 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Morris · Accepted Answer · 2014-09-01 13:38:32Z

0

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/

answered Sep 1, 2014 at 13:38

Chris Morris

1,0132 gold badges19 silver badges41 bronze badges

Comments

Ahab · Accepted Answer · 2014-09-01 13:40:03Z

-1

Try:

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

to remove the footer and

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

to insert the new stuff after your options-div.

answered Sep 1, 2014 at 13:40

Ahab

7051 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery replace existing div element with another

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related