document.createElement('button')のhref動的生成

前提・実現したいこと

以下のHTML（Javascript）で、ボタンを自動生成して、各ボタンに別々のURLを付加するプログラムを作成しています。ひな形として使っているHTMLテンプレートの都合上、Buttonタグを使う必要があります（CSS修正の手間を省くため）。また、URLには、共通のアドレスの後ろにパラメータを渡す予定です。

発生している問題・エラーメッセージ

HTMLに直書きしたonclick はURLが付加されるのに、Javascriptから生成したonclickは付加されず、ボタンを押下しても何も起きません。お気付きの点がございましたら、ご教示いただけますと幸いです。

該当のソースコード

Javascript
1<!DOCTYPE html>
2<html lang="en">
3   <head>
4      <title>tmp</title>
5      <meta charset="utf-8">
6   </head>
7   <body>
8      <section>
9         <div id="buttonelements">
10            <div>
11               <h5>HTML Original</h5>
12               <button type="button" onclick="location.href='https://www.google.com?0'">Button: Original</button>
13            </div>
14         </div>
15      </section>
16
17      <script>
18         for(var i=1; i<=3; i++){
19
20           var div_element = document.createElement('div');
21           var h5_element = document.createElement('h5');
22           h5_element.textContent = '#' + i;
23
24           var button_element = document.createElement('button');
25           button_element.id = 'btnid-' + i;
26           button_element.type = 'button';
27
28           var location_ref = "location.href='";
29           var btn_url = 'https://www.google.com?' + i;
30           var location_ref_end = "'";
31           var onclick_url = location_ref + btn_url + location_ref_end;
32           button_element.onclick = onclick_url;
33           //button_element.onclick = "location.href='https://www.google.com'";
34           button_element.textContent = 'Button:' + i;
35
36           div_element.appendChild(h5_element);
37           div_element.appendChild(button_element);
38
39           var btns = document.getElementById('buttonelements');
40           btns.prepend(div_element);
41         }
42      </script>
43   </body>
44</html>