How to appendChild to an array of images with specific height and width

I'm trying to append the title of each image of an array to each individual image who's height and width are greater than x

*Couldn't figure out how to format this correctly with the editor

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
       }
    }   
 }

OK this solved my case

function insertafter开发者_JAVA技巧(newChild, refChild){ 
 refChild.parentNode.insertBefore(newChild,refChild.nextSibling);
 }

---

Your error is in hr.style.border-bottom="1px solid skyblue". In javascript you need to use camelCase properties: hr.style.borderBottom="1px solid skyblue". See this SO-question.

Furthermore, you can't use appendChild on an img element. You'll have to wrap the image in a div (so: create a div element, append the img to that, remove the img from it's original position, create a hr element, append it to the div).

Last but not least: you can't use innerHTML with a h(orizontal)r(uler). So what remains is: create a div element, append the img to that ¹, remove the img from it's original position, create a textNode (or a span) containing the img title, and append that to the div.

¹ another idea may be to use the image as a background image for the newly created div.