How do you add attributes to elements without hard-coding them in HTML?

Question

So, in my specific case, I am trying to make all the <a> elements in a particular div have the attribute target = "_blank" to open them in new tabs.

But this could work with any element and any attribute. I'm just wondering if there is a way to add these attributes with Javascript.

My first thought was to use CSS, but then I realized that this is not a style issue.

Answer 1

I would not recommand target="_blank" in that case. But you could catch the click event on a link :

var links = document.getElementById('mydiv').getElementsByTagName('a');

for(var i = 0, len = links.length; i < len; i++) {
    links[i].onclick = function(e) {
        e.preventDefault();
        window.location = this.getAttribute("href");
    }
}

Or with jQuery :

$('#mydiv a').click(function(){
    window.location = $(this).attr('href');
    return false;
});

Answer 2

TRY THIS myElement.setAttribute("yourattribute", "yourvalue");

Answer 3

As workabyte points out, this is probably a job for jQuery...

$("#divId a").attr("target", "_blank");

Answer 4

if you use jQuery then you could do this on load if there is some way to select the div in question.

$(function(){
    $('#divId').find('a').attr('atribute name','value for atribute');
});

Answer 5

$('#divId').children('a').attr('attrName','attrVal');

Answer 6

Get elements by document.getElementsByTagName('a') or similarly and use setAttribute function.

But if you want this behaviour everywhere i'd recommend to set it in html.

Answer 7

Here is a small example in pure javascript:

<div id="myDiv">
   <a href="http://google.com">Google</a>
   <a href="http://facebook.com">Facebook</a>
</div>
<button onclick="setLinksTarget()">Set target</button>

<script type="text/javascript">
function setLinksTarget(){
    var div = document.getElementById('myDiv'),
        links = div.getElementsByTagName('a'),
        i;

    for(i = 0; i < links.length; i+=1){
        links[i].setAttribute('target', '_blank');
    }
}
</script>

Note that setAttribute is not supported in IE8 and bellow (according to http://www.w3schools.com/jsref/met_element_setattribute.asp)

You could also use jquery to do the job and then it's a one liner:

function setLinksTarget(){
    $('#myDiv a').attr('target','_blank');
}