jQuery replaceWith无法正确加载div

Question

I'm new to jQuery but am hoping to replace a <div> with another that contains a slideshow when I click on a link. The problem with my code however is that when I click the link, the <div> I want to load isn't showing. Instead I just see div.slidesContainer for example.

My HTML:

<div id="leftText">
  <h2>Heading.</h2>
  <p>Text. <a href="/" id ="startSlide" %>'Learn more.'</a></p>
</div>
<div id="slide">
<div class="slides_container">
  <div>
    <h1>Slide heading.</h1>
      <p>Slide text.</p>
  </div>
</div>
</div>

My jQuery:

$(function(){
    $("a#startSlide").click(function(){
        $('div#leftText').replaceWith('div#slide');
        return false;
    });
});

Here's a jsFiddle if it'll help: http://jsfiddle.net/HR43b/

Answer 1

You need to pass an HTML or jQuery object to replaceWith: http://api.jquery.com/replaceWith/

.replaceWith( newContent )

newContentThe content to insert. May be an HTML string, DOM element, or jQuery object.

.replaceWith( function )

functionA function that returns content with which to replace the set of matched elements.

String:

$('div.inner').replaceWith('<h2>New heading</h2>');

Object:

$('div.third').replaceWith($('.first'));

Callback:

$('div.container').replaceWith(function() {
  return $(this).contents();
});

Answer 2

You have to pass a selector, not a string:

$(function() {
    $("a#startSlide").click(function() {
        $('div#leftText').replaceWith($('#slide'));

        $('#slide').css('visibility', 'visible');
        return false;
    });
});

Demo: http://jsfiddle.net/HR43b/3/

Answer 3

Try this.

$('div#leftText').replaceWith('<div id="slide"></div>');

Or

$('div#leftText').replaceWith($('div#slide'));

Answer 4

Check this:

div#slide {
    visibility:hidden;
}

your <div> is hidden.. before replacing with other content change its behavior to visible. and then use replaceWith

your altered jsfiddle

 $(function(){
        $("a#startSlide").click(function(){
            $('div#slide').css('visibility','visible');
            $('div#leftText').replaceWith($('div#slide'));
            return false;
        });
    });