CODEWITHSUNDEEP
javascriptjqueryhtml
werck
werck

Reputation: 21

Append does nothing

I'm trying to add an element after removing another:

$("a.III").click( function(e) {
    var element = '<div class="tagul" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus"></div>';

    e.preventDefault();
    $("div.tagul").fadeOut("slow", function(e) {
        $("div.tagul").remove();
        $("span.content.left").append(element);
        $("div.tagul").fadeIn("slow");
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="content left" style="float: left;">
  <div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew"></div>
</span>
<span class="content" style="float: right">

</span>

Nothing happens after the older div's fadeOut. I assume I'm doing something wrong while trying to append the new element.

Upvotes: 0

Views: 331

Answers (1)

APAD1
APAD1

Reputation: 13666

Your code works fine, the problem is most likely that you don't have any content in the divs you're removing/appending, so you can't see that it's working. Here's your exact code but with content in the divs so you can actually see the script working(added an anchor with class of III which I'm assuming you forgot to include in your post):

$("a.III").click( function(e) {

  e.preventDefault();
  
  var element = '<div class="tagul2" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus">Tagul 2</div>';
  
  $("div.tagul").fadeOut("slow", function(e) {
    $("div.tagul").remove();
    $("span.content.left").append(element);
    $("div.tagul2").fadeIn("slow");
  });
});
a.III {
  display:block;
  margin-bottom:20px;
}

.tagul2 {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="III">Click me</a>

<span class="content left" style="float: left;">
  <div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew">Tagul</div>
</span>
<span class="content" style="float: right">
			
</span>

Additionally, your fadeIn() function for the appended element won't actually do anything because the div is set to display by default(essentially you're trying to fade in an element which is already visible). In order to have it fade in, you could change the class of the element you're appending, set the CSS to display:none; and then the element will fade in after being appended(I have made this change in my answer).

Upvotes: 2

Related Questions