javascripthyperlinkexternal-links

How do I add target="_blank" to a link within a specified div?


Let's say I have the following code:

<div id="link_other">
    <ul>
        <li><a href="http://www.google.com/">google</a></li>
        <li>
            <div class="some_class">
                dsalkfnm sladkfm
                <a href="http://www.yahoo.com/">yahoo</a>
            </div>
        </li>
    </ul>
</div>

In this case, the JavaScript would add target="_blank" to all links within the div link_other.

How can I do that using JavaScript?


Solution

  • /* here are two different ways to do this */
    //using jquery:
    $(document).ready(function(){
      $('#link_other a').attr('target', '_blank');
    });
    
    // not using jquery
    window.onload = function(){
      var anchors = document.getElementById('link_other').getElementsByTagName('a');
      for (var i=0; i<anchors.length; i++){
        anchors[i].setAttribute('target', '_blank');
      }
    }
    // jquery is prettier. :-)
    

    You could also add a title tag to notify the user that you are doing this, to warn them, because as has been pointed out, it's not what users expect:

    $('#link_other a').attr('target', '_blank').attr('title','This link will open in a new window.');