htmlで押されたラジオボタンによって追加でhtmlを記述したい

Question

簡易的な入力フォームを作っていて、ラジオボックスの選択でそのあとに入力フォームを追加で表示するやり方が知りたいです。

###作成したソース
HTML

<div class="add_user">
		<table border="1" style="border-collapse: collapse">
		<tr>
			<tr>
				<td bgcolor="98fb98">氏名</td>
				<td><input type="text" name="name" /></td>
			</tr>
			<tr>
				<td bgcolor="98fb98">氏名(カタカナ)</td>
				<td><input type="text" name="nameKana" /></td>
			</tr>
			<tr>
				<td bgcolor="98fb98">Eメールアドレス</td>
				<td><input type="text" name="name" style="width: 400px" /></td>
			</tr>
			<tr>
				<td bgcolor="98fb98">パスワード</td>
				<td><input type="password" name="name" /></td>
			</tr>
			<tr>
				<td bgcolor="98fb98">パスワード(確認)</td>
				<td><input type="password" name="name" /></td>
			</tr>
			<tr>
				<td bgcolor="98fb98">郵便番号(ハイフンなし)</td>
				<td><input type="text" name="name" style="width: 100px" /><button>住所検索</button></td>
			</tr>
			<tr>
				<td bgcolor="98fb98">住所</td>
				<td><input type="text" name="name" style="width: 400px" /></td>
			</tr>
			<tr>
				<td bgcolor="98fb98">電話番号(ハイフンなし)</td>
				<td><input type="text" name="name" /></td>
			</tr>
			<tr>
			<td bgcolor="98fb98">性別</td>
				<td><input type="radio" name="example" value="girl"checked>女
					<input type="radio" name="example" value="boy" id="set">男</td>
			</tr>
             <tr>
                 <td><div id="result"><div></td>
             </tr>	
		</table>
		<button type="submit" name="name" class="btn-square-little-rich">入力確認画面へ</button>
</div>

CSS

.add_user{
	width:800px;
	margin-top:30px;
	margin-left:20%;
	margin-bottom:50px;
	padding-top:20px;
	padding-bottom:20px;
	background-color:#fff;
	border-radius:10px;
	text-align:center;
}

.add_user table{
	margin-left:50px;
	text-align:left;
}
.add_user input{
	height: 25px;
	margin-top:5px;
	margin-bottom: 5px;
}

.add_user button{
	margin-top:20px;
	margin-bottom:20px;
}

JavaScript

var element = document.getElementById( "set" ) ;

if ( element.checked ) {
	test.insertAdjacentHTML('result','職業<td><input type="text"></td>');
} 

やりたいこととしては選択が「男」だった場合選択された瞬間、職業を入力するフォームを追加したいです。

###環境
エディタ：eclipse 2018
ブラウザ：Google Chrome

Comments

[yambejp]

追加するより、隠しておいたタグを表示する方が楽だと思いますが・・

[miyabi_pudding]

javascriptないし、CSSは最低限必要ですが、
自身で書いたコードはありませんか？

[takuson]

yambejpさん
隠しておくとは具体的にどのようなものになるのでしょうか？

[takuson]

miyabiさん
とりあえず、自分なりに作成した物を追加しました

[miyabi_pudding]

> 隠しておくとは具体的にどのようなものになるのでしょうか？

JavaScriptでDOM追加などをするのではなく、
HTMLでは最初から記載し、スタイルで非表示にしておき、
CSSなりJSなりで、表示・非表示を切り替えるだけにする、ということです。

[takuson]

miyabiさん
やっては見たものの見えないだけで実際にはあるのでその部分の余白が気になります。

Answer 1

まず、name属性はしっかり整備してください。
（ラジオグループにおいての統一性もなければ、違う項目なのに、同じnameになっているなどあり、めちゃくちゃ）
form送信においては、様々な処理において、一番重要になります。
これを疎かにすると、その後の処理はまともに行えないでしょう。
（送信後のバックエンド処理も含め）

<table border="1" style="border-collapse: collapse" id="submitForm" name="submitForm">
<!-- 他の行は省略 -->
  <tr id="selectedSex">
    <td bgcolor="98fb98">性別</td>
    <td><input type="radio" name="sex" value="girl" checked>女
      <input type="radio" name="sex" value="boy" id="set">男
    </td>
  </tr>
</table>

const parentTable = document.getElementById('submitForm');

const radios = document.getElementsByName('sex');
const radioMan = document.getElementById('set');

radios.forEach(elm => {
  elm.onchange = function() {
    if (this == radioMan && this.checked) {
      const jobRow = parentTable.insertRow();
      jobRow.id = 'jobInput';
      const title = jobRow.insertCell();
      const inputJobCell = jobRow.insertCell();
      title.textContent = '職業';
      
      const inputJob = document.createElement('input');
      inputJob.type = 'text';
      inputJob.name = 'job';
      
      inputJobCell.appendChild(inputJob);
    } else {
      const jobRow = document.getElementById('jobInput');
      console.log(jobRow);
      if (jobRow) {
        jobRow.remove();
      }
    }
  };
});

Comments

[takuson]

すみません。
name属性については表示だけできればよかったので深く考えてませんでした。

[miyabi_pudding]

まぁ・・・・、あとでやるつもりだったのかもしれませんが、
あんまし後回しすると、後にすごく苦労する部分なので、
先に整備しとくにこしたことはないかと思います。
また、JavaScriptでformのあれこれをコントロールする時、
nameをうまく使うと、
非常に効率よくコントロールできたりしますので、
name属性はしっかりすることをお勧めします。