我需要使用 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,只是因为我是一个菜鸟,想了解我的代码在做什么。
最佳答案
您的代码有 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);
}
关于javascript - 向嵌套类添加新元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35565292/