Dynamically adding target attribute to a collection of pre-existing anchor tags within a known div element

I have a div with id="images".

The div contains some images that are each wrapped in an anchor tag with no target attribute.

I'd like to insert script into my page that pulls a reference to each of these anchor ele开发者_开发技巧ments and ads a target="new" attribute to them (in the runtime) so that when they are clicked they each open in a new window.

I don't want to hardcode the target attributes on the anchor tags. This is a post deployment workaround. I'm not using jquery in this application.

<div id="images"><a href=""><img src="foo.png" /></a>...etc </div>

---

No jQuery required! You can do this easily using native DOM methods:

// Find all the anchors you want to modify
var anchors = document.getElementById('images').getElementsByTagName('a'),
    i = anchors.length;

// Add the target to each one
while(i--) anchors[i].target = "new";

---

You can traverse all the anchor elements inside your div, first by looking up the div itself, and then you can use the element.getElementsByTagName method:

var imagesDiv = document.getElementById('images'),
    images = imagesDiv.getElementsByTagName('a');

for (var i = 0, n = images.length; i < n; i++) {
  images[i].target = "_blank";
}

---

function replaceAllAnchors(Source,stringToFind,stringToReplace){
    //sample call:  body=replaceAllAnchors(body,'<a ','<a target="_blank" ');  
    var temp = Source;
    var replacedStr="";
    var index = temp.indexOf(stringToFind);
    while(index != -1){
         temp = temp.replace(stringToFind,stringToReplace);
         replacedStr=replacedStr+temp.substr(0,temp.indexOf("/a>")+3);
         temp=temp.substr(temp.indexOf("/a>")+3);            
         index = temp.indexOf(stringToFind);

    }
    replacedStr=replacedStr+temp;
    return replacedStr;

}

---

Why can't you use jQuery? I've added this here for other people who google.

It's 1 line of code in a loop:

$('#images a').each(function(){ $(this).attr('target', '_blank'); });

Now isn't that much more simple? Use jQuery if you can.