javascript - 向嵌套类添加新元素

Question

我需要使用 JS 在 HTML 的特定嵌套类中创建一个新元素。所以在这个例子中，我只需要在“collies”类嵌套在“dogs”中的地方创建一个带有“paw-print”类的新跨度。

这是我目前拥有的:https://jsfiddle.net/p50e228w/6/

问题是我当前的 JS 在第一个实例上工作，但在另一个实例上不工作。我目前将 document.getElementsByClassName 设置为“collies”，但只有当它在父“dogs”类中时我才需要定位该类。

我在这里错过了什么？

var span = document.createElement("span");
span.className = "paw-print";
var wrap = document.getElementsByClassName("collies");
for(var i = 0; i < wrap.length; i++) {
  wrap[i].appendChild(span);
}

我可以使用 jQuery，但我一直在使用 vanilla JS，只是因为我是一个菜鸟，想了解我的代码在做什么。

Answer 1

您的代码有 2 个问题。

• 定位:图像被赋予绝对位置，它们基于页面布局处于相同位置。所以给父容器设置相对定位。

CSS

.relative {
  position: relative;
}

• 您需要将其附加到此处为 collie 的父元素。

您可以使用 querySelectorAll 来查找您要查找的嵌套关系。

 var collies = document.querySelectorAll('.dogs .collies');
 for (var i = 0; i < collies.length; i++) {
   var span = document.createElement("span");
   span.className = "paw-print";
   collies[i].appendChild(span);
 }

Fiddle