Javascript 如何使append（）和appendChild（）生成所需的元素？

我正在制作一个带有过滤器的图库，过滤器上有六个图像，图库位于

ul

中，每个

li

元素都有两个类别中的一个，使过滤器工作。结构如下：

<div id="productsGrid">
   <ul id="portfolio">
      <li class="men">
         <img src="images/grid-images/men/1.jpg" /><div class="caption">TEXT IMG 1</div>
      </li>
      <li class="woman">
         <img src="images/grid-images/woman/1.jpg" /><div class="caption">TEXT IMG 2</div>
      </li>
      <li class="men">
         <img src="images/grid-images/men/2.jpg" /><div class="caption">TEXT IMG 3</div>
      </li>
      <li class="woman">
         <img src="images/grid-images/woman/2.jpg" /><div class="caption">TEXT IMG 4</div>
      </li> 
      <li class="men">
         <img src="images/grid-images/men/3.jpg" /><div class="caption">TEXT IMG 5</div>
      </li>
      <li class="woman">
         <img src="images/grid-images/woman/3.jpg" /><div class="caption">TEXT IMG 6</div>
       </li>
   </ul>
</div>

此代码运行时，控制台不会给出任何错误消息，但不会显示使用

文档.createElement

创建的元素。我希望每次单击一个过滤器按钮时，删除没有单击类的三个图像，并显示该类的其他三个图像。过滤器栏只有三个选项，可以显示所单击类的六个图像

<div id="topBar">
  <ul id="filter">
    <li class="current"><a href="#">All</a></li>
    <li><a href="#">Men</a></li>
    <li><a href="#">Woman</a></li>
  </ul>  
</div> 

我不知道这段代码是否正确完成，或者是否有其他方法可以简化这一过程，但我还不是JS和jQuery方面的专家。非常感谢您的帮助。

尝试jquery方式：

 if(!$(this).hasClass(filterVal)) {
    $(this).remove();
    var linew = '<li class="'+filterVal+'"><img src="images/grid-images/'+filterVal+'/'+i+'.jpg"/></li>'
    $('#portfolio').append(linew);
 } else {
 }

if（！$（this）.hasClass（filterVal））{
$（this.remove（）；
var linew='
'
$（“#投资组合”）.append（linew）；
}否则{
}

您可以这样做：

           var $linew = $("<li />");
           $linew.attr("class", filterVal);
           $imgNew = $("<img />");
           $imgNew.attr("src", 'images/grid-images/'+filterVal+'/'+i+'.jpg');
           $linew.append($imgNew);
           $('#portfolio').append($linew);

var$linew=$（“
”）；
$linew.attr（“类”，过滤器瓦尔）；
$imgNew=$（“
请注意，您可以将该图像用作.man和.woman类的背景图像，这将简化您的js代码。
为什么要将vanilla js与jquery混合使用？是的：appendChild是dom方法，append是jquery方法。换句话说，您应该使用append，而不是appendChild。在哪里？据我所知，我只使用js和jqueryoh好的，我明白了....@R.Garcia appendChild是一个纯js函数，它对jquery对象不起作用。我尝试了这两个代码，它们都很好，我仍然有问题要解决，因为如果我继续单击“男人”或“女人”类，前3个图像就会消失。问题是，我需要为结构中的每个li元素创建一个不同的图像。到目前为止ppend工作正常。是的，为什么要删除和插入线条？为什么不简单地将它们淡出并添加类。隐藏？是因为我需要在单击男性或女性类时，画廊结构中不存在的图像的其余部分会感到震惊。在开始时，只有3个女性和3个男性。当用户单击男性时例如，女性的形象应该被男性的阶级形象所取代
           var $linew = $("<li />");
           $linew.attr("class", filterVal);
           $imgNew = $("<img />");
           $imgNew.attr("src", 'images/grid-images/'+filterVal+'/'+i+'.jpg');
           $linew.append($imgNew);
           $('#portfolio').append($linew);