ボタンをクリックしたらボタンが複製される仕様にしたい

ボタンをクリックすると「フォームに入力された文章」と「作業中」という名前のボタンを作成されるコードを書きたいのですが、下記のコードではうまく反映されません。
下記サイトを参考にボタンの作成を試みたのですが、ダメでした。
参考サイト

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9
10</head>
11<body>
12<h1>ToDoリスト</h1>
13
14<div class="radiobutton">
15    <input type="radio" id="button-1" name="radio1" value="1" checked />
16    <label for="button-1">すべて</label>
17    <input type="radio" id="button-2" name="radio1" value="2" />
18    <label for="button-2">完了中</label>
19    <input type="radio" id="button-3" name="radio1" value="3" />
20    <label for="button-3">作業中</label>
21
22
23
24  <h3 id="id_h3">ID コメント 状態</h3>
25  <h2>新規タスクの追加</h2>
26  
27
28  <p>
29      <input type="text" id="id_text" value=""> 
30      <button id="btn" type="btn" class="button"> 追加</button>
31  </p>
32 
33  <script>
34    
35    const btn = document.getElementById('btn');
36    btn.addEventListener('click', () => { 
37      const text = document.getElementById('id_text').value;
38      const h2 = document.getElementById('id_h2');
39      document.body.insertBefore(document.createTextNode(text), h2);
40
41      function createElement() {
42      const btn1 = document.createElement("button1");
43      btn1.textContent = "作業中";
44      document.getElementById("working").appendChild(btn1);
45      }
46    });
47
48      
49
50  </script>
51
52</body>
53</html>

CSS
1
2.button {
3  border-radius: 10px;
4}
5.button:hover {
6  background-color: #59b1eb;
7}
8.button:active {
9  top: 3px;
10  box-shadow: none;
11}
12
13
14.radiobutton label {
15	padding: 0 0 0 24px;	/* ラベルの位置 */
16	font-size: 16px;
17	line-height: 28px;		/* ボタンのサイズに合わせる */
18	display: inline-block;
19	cursor:	pointer;
20	position: relative;
21}
22.radiobutton label:before {
23	content: '';
24	width: 14px;		/* ボタンの横幅 */
25	height: 14px;		/* ボタンの縦幅 */
26	position: absolute;
27	top: 0;
28	left: 0;
29	background-color: rgb(0, 162, 255);
30	border-radius: 50%;
31}
32.radiobutton input[type="radio"] {
33	display: none;
34}
35.radiobutton input[type="radio"]:checked + label:after {
36	content: '';
37	width: 3px;		/* マークの横幅 */
38	height: 3px;		/* マークの縦幅 */
39	position: absolute;
40  top: 5.5px;
41	left: 5.5px;
42	background-color: #fff;
43	border-radius: 50%;
44}

行動規範の内容に同意します

回答1件

ベストアンサー

動くサンプル：https://jsfiddle.net/8o1amphx/

↑ とりあえず動くようにしました。（関数定義を外して#workingの要素を追加しただけ）
Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で何冊か本を買って読むと良いと思います。

js
1const btn = document.getElementById('btn');
2btn.addEventListener('click', () => { 
3  const text = document.getElementById('id_text').value;
4  const h2 = document.getElementById('id_h2');
5  document.body.insertBefore(document.createTextNode(text), h2); // これについての質問( https://teratail.com/questions/225943 )が解決済みになっていないのが気になる
6
7  function createElement() { // 関数を定義しているが、使用していない（関数にする必要がそもそも無い）
8  const btn1 = document.createElement("button1"); // HTMLの要素に「button1」という要素は無い（文法が間違っている）
9  btn1.textContent = "作業中";
10  document.getElementById("working").appendChild(btn1); // HTML上に「working」というidが振られた要素が無い
11  }
12});