Question

I want to add an <img> to every <td> tag with a certain CSS Class in my page.
I used “querySelectorAll” to look them up, like this:

var painted = document.querySelectorAll('.painted');

Now I would like to add to each one of them a specific image with a unique ID. I assume I need to loop through the list somehow and edit each element’s innerHTML, could anyone provide the syntax for that?

Thanks

Answer 1

Just run it like a normal for loop, and add properties to each element.

for (var i = 0, len = painted.length; i < len; i++) {
    painted[i].id = "foo" + i;
    painted[i].innerHTML = "<strong>Your content</strong>";
}

This uses innerHTML to create new content. If you need more complex content processing then there’s no single syntax. You need to learn the DOM API and perform the needed manipulations.

For example, if you wanted to add an image, you can create one and append it directly.

for (var i = 0, len = painted.length; i < len; i++) {
    var img = document.createElement("img");
    img.id = "myimage" + i;
    painted[i].appendChild(img);
}

Notice that I’m not using HTML markup. A DOM node doesn’t have “HTML content”. It is part of an object tree structure, so it has child nodes, which have their own child nodes, and so on.

So what you need to do, is perform some DOM selection with the current painted element as the root, and decide what should go where.