<a> href not opening the replaced href

Question

I am building a youtube chrome extension. I am trying to replace href of <a> tag which is

<a class="yt-simple-endpoint style-scope ytd-compact-video-renderer"></a> . 

Which is html dom i want to trigger after i change href

in js i have

var ele =  document.getElementsByClassName( "yt-simple-endpoint style-scope ytd-compact-video-renderer" )[0];

ele.setAttribute('href' ,"watch?v=Rj2QkLaaj2E");

ele =  document.getElementsByClassName( "yt-simple-endpoint style-scope ytd-compact-video-renderer" )[0];


 ele.click();

I changed href of ele and triggered click() but it is opening old href instead of replaced one.