Question

I’m working on a greasemonkey script to format some raw numbers by thousands. The format function is just fine. Problem is: some numbers are placed on img tags, for instance:

<div class = "opinion">
    <img class ="icon-like" alt="img" src="like.png">1148597
    <img class="icon-dislike" alt="img" src="dislike.png">600000000
</div>

Since img tags by definition has no child nodes, what is the best way to iterate over the imgs to place the formatted number back on them? If I use .innerHTML, the img tag is removed, displaying just the formatted numbers.

tnx in advance.

Answer 1

Just call nextSibling on the image, then use textContent to actually get the text:

var images = document.querySelectorAll('.opinion img');

Array.prototype.forEach.call(images, function (el) {
    var text = el.nextSibling.textContent;
    // Use the text associated with the image...
});

Here’s the fiddle: http://jsfiddle.net/TYGAq/