How to make button open a link in new tab in JavaScript?

Question

I want to create a <button> that when clicked will open a URL in a new tab.

This is easy to achieve in pure HTML, but the catch is that the <button> is dynamically generated, thus this has to be done in JavaScript.

This is the code I used to create a <button> so far using JavaScript and HTML DOM:

<body>
  <div id = 'only_div'>
  </div>
  <script>
    var btn=document.createElement("button");
    btn.innerText = "Click me";
    document.getElementById("only_div").appendChild(btn);
  </script>
</body>

In this existing code, I just want to add that when clicked, a URL (for example http://www.stackoverflow.com) will open in a new tab.

aviya.developer · Accepted Answer · 2019-08-17 12:07:01Z

5

You can add a click event listener to the button with addEventListener() and then when it's trigger use window.location.replace() to redirect.

<body>
    <div id = 'only_div'>
    </div>

    <script>
      var btn=document.createElement("button");
      btn.innerText = "Click me";
      btn.addEventListener("click", ()=>{
         window.location.replace(URL);
      });
      document.getElementById("only_div").appendChild(btn);
    </script>

</body>

for a new tab use:

window.open(URL, '_blank');

Docs:

edited Aug 17, 2019 at 12:07

answered Aug 17, 2019 at 12:02

aviya.developer

3,6233 gold badges21 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1584421 Over a year ago

This works but unfortunately, it doesn't open the URL in a new tab.

Paul Fitzgerald · Accepted Answer · 2019-08-17 12:14:35Z

1

You could do something like the following, which will open the tab in a new tab and go to this tab:

function openInNewTab(url) {
  const win = window.open(url, '_blank');
  win.focus();
}

const btn=document.createElement("button");
btn.innerText = "Click me";
btn.addEventListener('click', function () {
    openInNewTab('http://www.test.com')
});
document.getElementById("only_div").appendChild(btn);

See js fiddle here.

edited Aug 17, 2019 at 12:14

answered Aug 17, 2019 at 12:01

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

2 Comments

user1584421 Over a year ago

It worked! But many people provided with may correct answers. What is the policy on SO, which answer to accept as the correct one?

Paul Fitzgerald Over a year ago

this answer was the first one, and it does what you asked so this should probably be the accepted one, but who knows 🤷‍♂️up to you

Anupam · Accepted Answer · 2019-08-17 12:06:04Z

1

I think you can simply add

btn.onclick = function() { // Note this is a function window.open('http://www.stackoverflow.com/', '_blank'); };

and that should do it.

answered Aug 17, 2019 at 12:06

Anupam

1,1883 gold badges20 silver badges33 bronze badges

Comments

Mamun · Accepted Answer · 2019-08-17 12:32:30Z

1

You have to attach the event (click) to the button. You can do so by using EventTarget.addEventListener(). You can use Window.open() to load the specified resource into the browsing context.

Your code should be like the following:

var btn=document.createElement("button");
btn.innerText = "Click me";
// attach the event
btn.addEventListener('click', function(){
  window.open('http://www.stackoverflow.com', '_blank'); // _blank will open the site in a new tab
});
document.getElementById("only_div").appendChild(btn);

edited Aug 17, 2019 at 12:32

answered Aug 17, 2019 at 12:06

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Ritesh Khandekar · Accepted Answer · 2019-08-17 13:45:09Z

1

Use setAttribute():

btn.setAttribute("onclick","window.open('https://stackoverflow.com','_blank')");

answered Aug 17, 2019 at 13:45

Ritesh Khandekar

4,0153 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to make button open a link in new tab in JavaScript?

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related