切换div查找子图像无法正常工作

Question

By clicking on the button .iconToggler I want to toggle the icon from .upload from icon A to Icon B....

It works partially till I add this line if(!$(".container").find("span").length) $(".container").append("<span>Icon B</span>"); .. that only append Icon B in case not exists previously.

What am I doing wrong?

HTML

<div class="container"> [html] 
  <div class="upload">Icon A</div>
</div>


<div class="iconToggler"> toggler Upload Icon </div>

JQUERY

   $(".iconToggler").on("click",function() { 
      $(".upload").toggle(0, function() {

          $(this).is(":visible") ? $(this).html("Icon A") : if(!$(".container").find("span").length) $(".container").append("<span>Icon B</span>");


 });


 });

Answer 1

You may use .html( function ) :

 $(".iconToggler").on("click", function () { $(".upload").html(function (idx, txt) { return (txt == "Icon A") ? "<span>Icon B</span>" : "Icon A"; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="upload">Icon A</div> </div> <div class="iconToggler"> toggler Upload Icon</div>