Javascript 如何将子对象附加到具有特定高度和宽度的图像数组中

我试图将数组中每个图像的标题附加到每个高度和宽度大于x的图像上

*无法确定如何使用编辑器正确格式化此内容

var curHeight;
var curWidth;
var hr;
function imgHr(){
  var allImages = document.images;
   for (var i=0; allImages.length > i; i++) {
     var imgSrc = allImages[i].src;
     var newImg = new Image();
     newImg.src = imgSrc;    
     curHeight = newImg.height;
     curWidth = newImg.width;
      if(curWidth>='80' && curHeight>='80'){
         var imgGet=allImages[i];
         var hrT=allImages[i].title;
         var hr= document.createElement("hr");
         hr.style.border-bottom="1px solid skyblue";
         hr.innerHTML=hrT;
         //appendChild isn't working
         imgGet.appendChild(hr);
         //but everthing else works: example
         imgGet.style.border="1px solid red";
       } else {
         //maybe add something later
       }
    }   
 }

好了，这解决了我的案子

function insertafter(newChild, refChild){ 
 refChild.parentNode.insertBefore(newChild,refChild.nextSibling);
 }

---

您的错误出现在

hr.style.border bottom=“1px solid skyblue”

中。在javascript中，您需要使用camelCase属性：

hr.style.borderBottom=“1px solid skyblue”

。看

此外，您不能在

img

元素上使用

appendChild

。您必须将图像包装在

div

中（因此：创建

div

元素，将

img

附加到该元素，将

img

从其原始位置移除，创建

hr

元素，将其附加到

div

）

最后但并非最不重要的一点：您不能将

innerHTML

与

h（orizontal）r（uler）

一起使用。所以剩下的是：创建一个

div

元素，将

img

附加到该1，从其原始位置移除

img

，创建一个包含img标题的textNode（或span），并将其附加到

div

---

1另一个想法可能是将该图像用作新创建的

div

的背景图像，谢谢您指出这一点。但是appendChild仍然不工作。那么appendChild将尝试将新元素嵌套在img元素中吗？因此，我需要使用jQuery的（.after）来实现这一点，而无需添加div元素？我认为没有其他方法可以在不使用jQuery的情况下实现这一点。您的方法可能会奏效，但我不希望手动将div元素环绕在大量图像周围。感谢您制作了clearHi Tj，编辑了更多内容，因为我突然想到您正试图将

innerHTML

用于

hr

元素。我从来没有使用过JQuery，所以说不出它是否更适用于这种情况。实际上，我的目标是在图像后面附加新元素（标题）。但这不能仅用javascript实现*很抱歉，水平规则应该是标题元素（h1）。我用hr（标题）作为变量，把自己弄糊涂了。不过再次感谢你