Javascript 通过过滤器创建随机图像库

我有点被我想创造的东西卡住了。我对javascript非常陌生。我有一个基于列表的随机图像库脚本，它本身可以正常工作，但我有两个问题

由于某些原因，将脚本放在函数中会阻止它使用css

我正在尝试添加一个额外的功能，将图像过滤到特定的类别，我不确定这样做的最佳方式

如果我有通过innerHTML显示图像库的功能，它会像预期的那样应用css（我让它们以某种方式调整大小），但它一次只列出一个图像-我希望它以随机顺序显示与标记/标签关联的所有图像（但也只显示那些特定的图像）

我的列表当前设置如下（不确定这是否是此类型函数的最佳方式）

和一个运行该功能的按钮

<button onclick=displayAll()>All</button>

全部

虽然CSS不适用，但这确实有效。图像太大，缺少边框（cdimg的样式宽度为355.56px，高度为200px，纯白边框为2px）

我真正被困的地方是有额外的按钮来过滤图像。我想做这样的事

contents[0]='<a href="><img filter="nature" class="cdimg" src=""></a>'

contents[0]=''

我希望能够在图像中添加类似filter=“”，并运行一个只显示这些图像的函数，如果可能的话，还可以按随机顺序显示这些图像

<button onclick="displayFilter(nature)">Nature</button>
<button onclick="displayFilter(city)">City</button>

自然
城市

等等。 我很抱歉，如果有一个非常简单的解决方案，或者我甚至错过了一个确切的例子，但我已经摆弄了几个小时，搜索，并没有真正找到我要找的，所以我感谢您对我的noob问题的耐心

我将我的项目粘贴到编辑器中，您可以直接查看 （此版本暂时不在div中实现图像库，因为它一次只显示一个图像，所以document.write会覆盖按钮）

---

再次感谢，很抱歉篇幅过长

问题是您使用的是

document.write

方法。write（）方法主要用于测试：如果在HTML文档完全加载后使用，它将删除所有现有HTML。
请参见此处：
因此，当您单击按钮时，

style

元素将被删除。
不要使用

document.write

尝试使用

document.body.appendChild

方法：

function displayAll(){
  //while all of array elements haven't been cycled thru
  while (i<contents.length){
      //generate random num between 0 and arraylength-1
      var random=Math.floor(Math.random()*contents.length);
      //if element hasn't been marked as "selected"
      if (contents[random]!="selected"){
            var temp = document.createElement("SPAN");
          temp.innerHTML = contents[random];
          document.body.appendChild(temp);
          //mark element as selected
          contents[random]="selected";
          i++;
      }
  }
}

函数displayAll（）{
//而所有数组元素尚未循环通过
虽然（由于您正在尝试学习，我的第一个建议是不要使用
document.write
（这就是为什么“document.write”会覆盖按钮的原因）

然后使用
appendChild
功能添加内容

parent.appendChild(content); 

看到这一点。如果您再次陷入困境，请创建一个新问题。
谢谢，我之前尝试过appendchild，但我认为我的语法不正确，因为它没有显示任何内容。我将尝试用您在此处提供的内容解决其余问题。
<button onclick="displayFilter(nature)">Nature</button>
<button onclick="displayFilter(city)">City</button>

function displayAll(){
  //while all of array elements haven't been cycled thru
  while (i<contents.length){
      //generate random num between 0 and arraylength-1
      var random=Math.floor(Math.random()*contents.length);
      //if element hasn't been marked as "selected"
      if (contents[random]!="selected"){
            var temp = document.createElement("SPAN");
          temp.innerHTML = contents[random];
          document.body.appendChild(temp);
          //mark element as selected
          contents[random]="selected";
          i++;
      }
  }
}

<div id="parent"></div>

var parent = getElementById("parent");

parent.appendChild(content);