要素の最後にHTMLを追加します。エラーはありません。 HTMLが追加されていません

Question

こんにちは私はクラスflex-control-navで注文リストを持っており、私はhtmlでそれを追加しようとしています。私はadd（）、append（）、html（）を無駄にしようとしました。私は間違って何をしていますか？

JS：

$('.flex-control-nav').add('<li data-toggle="modal" data-target="#youtubeModal"><img src="http://placehold.it/1000x1000" /></li> ') 

フルJS：

<script> 
    jQuery(document).ready(function($) { 
     //set product color as variable 
     var productColor = '<%- product.data["product.product_color"].value[0].text %>'; 
     // Remove empty p tags in markdown 
     $('p').each(function(index, item) { 
      if($.trim($(item).text()) === "") { 
       $(item).slideUp(); // $(item).remove(); 
      } 
     }); 

     $('.specs ul li a').attr('target', '_blank') 

     // Auto Attr 
     var attrText = "<%- product.uid %>"; 
     var attr = $(this).attr('alt'); 
     $('img').each(function() { 
      var $img = $(this); 
      if (typeof attr == typeof undefined || attr == false) { 
       $img.attr('alt', 'dome-' + attrText + '-image'); 
      } else { 
       $img.removeAttr("alt"); 
       $img.attr('alt', 'dome-' + attrText + '-image'); 
      } 
     }) 

     //Hamburger Menu 
     var width = $(window).width(); 
     $(window).on('resize', function() { 
      if (width <= 992) { 
        $("#primary-menu-trigger").addClass('side-panel-trigger'); 
        $("#hide-on-mobile").css('display', 'hide'); 
        $("#icon-color").css('color', productColor); 
       } 
      }).trigger("resize"); 

      $('.flex-control-nav').add('<li data-toggle="modal" data-target="#youtubeModal"><img src="http://placehold.it/1000x1000" /></li> ') // add youtube to thumb slider 

     }) //jQuery 

    </script> 

HTML

<div class="fslider" data-arrows="false" data-animation="fade" data-thumbs="true"> 
          <div class="flexslider"> 
           <div class="slider-wrap"> 
            <div class="slide" data-thumb="<%= product.data["product.buy-img"].value.main.url %>"><img src="<%= product.data["product.buy-img"].value.main.url %>" alt="Slider 1"></div> 
            <div class="slide" data-thumb="<%= product.data["product.thumbgallery1"].value.main.url %>"><img src="<%= product.data["product.thumbgallery1"].value.main.url %>" alt="Slider 1"></div> 
            <div class="slide" data-thumb="<%= product.data["product.thumbgallery2"].value.main.url %>"><img src="<%= product.data["product.thumbgallery2"].value.main.url %>" alt="Slider 2"></div> 
            <div class="slide" data-thumb="<%= product.data["product.thumbgallery3"].value.main.url %>"><img src="<%= product.data["product.thumbgallery3"].value.main.url %>" alt="Slider 3"></div> 
            <div class="slide" data-thumb="<%= product.data["product.thumbgallery4"].value.main.url %>"><img src="<%= product.data["product.thumbgallery4"].value.main.url %>" alt="Slider 4"></div> 
            <div class="slide" data-thumb="<%= product.data["product.thumbgallery5"].value.main.url %>"><img src="<%= product.data["product.thumbgallery5"].value.main.url %>" alt="Slider 4"></div> 
           </div> 
          </div> 
         </div> 

順序付けられたリストは、プラグインによってjQueryを使って生成されます。 〜

Answer 1

.add()

おかげで、セレクタ修飾子ではなく、HTMLコンテンツを追加するための機能です。あなたが.after()使いたい

：この場合

$('.flex-control-nav').after('<li data-toggle="modal" data-target="#youtubeModal"><img src="http://placehold.it/1000x1000" /></li> ')

.after()はすぐ各.flex-control-nav後liを追加します。

各.flex-control-navの末尾に要素を追加する場合は、.append()を使用してください。

また、入力したHTMLにクラスflex-control-navの要素が含まれているとは思われません。