干净的方式来生成HTML

Question

首先，我无法将所有元素放在一行中（全部内联）我正在尝试在envVariablesDiv内生成一行元素。我在尝试时使用javascript完成了所有html，这是一个非常混乱和混乱。

每次单击按钮时，是否有更简单的方法来添加元素行？我还需要能够在单击删除时删除该行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <div class="top20 content-form">
    <label class="col-sm-2 control-label" for="addEnv"><button class="btn btn-primary">add</button></label>
    <div class="col-sm-10">
      <label id="addEnv" class="label label-secondary pointer-label"><span class="fa fa-plus-circle"></span> Add environment variable</label>
      <div id="envVariablesDiv">
        <div class="input-group">
          <span class="input-group-addon">Text</span>
          <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
        </div>
       <div class="input-group">
          <span class="input-group-addon">Text</span>
          <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
        </div>
        <button class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>

JS我做了：现在样式不同了。我想使用输入组。

 $('#addEnv').click(function () {
   $('#envVariablesDiv').append('<div class="col-sm-5 top10"><label for="envName" class="control-label">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div>' +
       '<div class="col-sm-5 top10"><label for=envVar class="control-label">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div><div class="col-sm-2 top10"><button class="btn btn-danger"><span class="fa fa-trash"></span></button></div>');
});