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 1, remove the img
from it's original position, create a textNode (or a span) containing the img title, and append that to the div
.
1 another idea may be to use the image as a background image for the newly created div
.
精彩评论