javascript+bootstrapでの入力欄の追加

Question

以下のHTMLにある入力エリアをjavascriptでbootstrapで指定した形式で追加するプログラムを作りたいと考えています。
ボタンを押すと入力エリアは追加されるのですが、bootstrapで指定しているcol-sm-11の幅で作成されず、画面の両端までの入力エリアが作成されてしまいます。自分では何が足りないのか分からないのでご指導下さい。（全くの初心者質問ですみません）

<div id="form_area" class="form-group row">
<label for="procedure" class="col-sm-2 col-form-label">手順</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="input" name="procedure">
</div>
</div>
<input type="button" class="btn btn-info" value="追加" onclick="addForm()">

function addForm() {
  var div = document.createElement('div');
  div.className = 'form-group row';

  var input_data = document.createElement('input');
  input_data.type = 'text';
  input_data.className ='form-control'
  input_data.name ='procedure'
  
  var parent = document.getElementById('form_area');
  parent.appendChild(input_data);

}

Comments

[Lhankor_Mhy]

col-sm-11 で作成していないように見えます。
実際のコードから省いている部分があるのではないですか？

[sandalwalk]

再度確認しましたが、実際のコードと同じです。
ページを読み込んで最初に表示される１つめの入力エリアはcol-sm-11で表示されています。（col-sm-6などに変更すると小さくなります）
一方で、追加ボタンを押して表示される新しい入力エリアが画面の両端までの形式で表示になってしまいます。追加される入力エリアにも大きさの指定をしたいのですが上手くいかない状況です。appendChildが違うのかと疑っているのですが、入子になっているdivに対しての処理が出来ていない事を疑っていますが、その方法が分からず困っています。

[Lhankor_Mhy]

問題を把握しました。

Answer 1

以下のように変更するとどうですか？

//var parent = document.getElementById('form_area');
var parent = document.querySelector('#form_area .col-sm-11');

Comments

[sandalwalk]

回答ありがとうございます。
試しましたが、今度は新しい入力エリアも作成できないです。

[Lhankor_Mhy]

そうでしたか。当方では上手く動作しています。

ご提示いただいていない部分に原因があると思われます。

[Lhankor_Mhy]

ご提示のコード+回答のコードでサンプルを作りました。

https://jsfiddle.net/Lhankor_Mhy/u9o8n0rp/

↑上記ページは、sandalwalkさんの環境では「新しい入力エリアも作成できない」という問題が起きていますか？

問題が起きないのであれば、ご提示いただいていない部分に原因があると思われます。
問題が起きるのであれば、環境の問題かもしれません。

Answer 2

<div id="form_area" class="form-group row">
<label for="procedure" class="col-sm-2 col-form-label">手順</label>
<div id="size" class="col-sm-11">
<input type="text" class="form-control" id="input" name="procedure">
</div>
</div>
<input type="button" class="btn btn-info" value="追加" onclick="addForm()">

function addForm() {
  var div = document.createElement('div');
  div.className = 'form-group row';

  var input_data = document.createElement('input');
  input_data.type = 'text';
  input_data.className ='form-control'
  input_data.name ='procedure'

  var parent = document.getElementById('size');

  parent.appendChild(input_data);
}