Opening links in a new tab or window

Question

I've got a lot of links (150+) in an href (here I can only post 2) and I want them to be opened in a new tab or window. I've got this piece of code that works, but before I add it to my website and before I add it to a lot of articles of mine (250+), I want to make sure the syntax of the code is 100% correct. Also, do I need the <p>?

<script> 
window.onload = function(){
    var a = document.getElementById('links').getElementsByTagName('a');
    for (var i=0; i<a.length; i++){
         a[i].setAttribute('target', '_blank');
    }
} 
</script>

<div id="links">
    <p><a href="http://www.google.com/" >test</a></p>
    <p><a href="http://www.google.com/" >test</a></p>
</div>

Answer 1

The code itself is fine, though I would flip it, first html, then the javascript (without the window.onload).

AN example to explain why: If you have a huge image and a slow connection the loading takes say 5 seconds. These 5 seconds all your anchors don't have the target="_blank" and if a user clicks they still leave your website.

I would not use this method meself (unless I have to) . If you use AJAX to load content with anchors, those anchors will not have the target="_blank" either. This will require a bit more advances problem solving. If you want some links to be ignored, you can't with the current code. There are more small problems that will pop up which are all to minor to sum up here, but in the end are all just very ennoying.

I recommend that you do not rely on this method. Just take some time and update the content. I assume you have that in a datase, just FIND() and REPLACE(). Make it permanent.

Answer 2

The syntax for the JavaScript code is fine. You don't need the <p> tag for every <a> element. If you remove <p>, it doesn't matter if you don't have a specific style CSS for your <p> tag. I don't know what you are using with the <a> tag. Remember, the <p> defines a paragraph.

W3Schools

Answer 3

You can use querySelectorAll to loop through all of your elements:

document.addEventListener('DOMContentLoaded', function(e) {
    document.querySelectorAll('#links a').forEach(function(el, i) {
        el.setAttribute('target', '_blank');
    });
});