javascript - 将选择框事件中添加的动态表单元素依次对齐到选择框上方的页面顶部

Question

无法将在选择框事件中添加的动态表单元素依次对齐到页面顶部。它应该在选择框上方添加，并且选择框应该自动向下移动。但是我的代码将重叠的元素下词添加到选择框。

		function addToFilter(divName)
		{
			var val= document.getElementById('filter').value;
			var newdiv = document.createElement('div');
			switch(val)
			{
				case 'mcus': 
				newdiv.innerHTML = "Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:<select id='mcuc_selection'><option value='select'>--select--</option><option value='a1'>A1</option><option value='m1'>M1</option><option value='n1'>N1</option></select>";
				break;
				case 'oc': 
				newdiv.innerHTML = "Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:<select id='oc_selection'><option value='select'>--select--</option><option value='a2'>A2</option><option value='m2'>M2</option><option value='n2'>N2</option></select>";
				break;
			}
		document.getElementById(divName).appendChild(newdiv);
		}

<div class="col-md-12 col-sm-12 col-xs-12">
									<div class="x_panel">
										<div class="x_title">
										
											<ul class="nav navbar-right panel_toolbox">
												<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
												</li>
												<li><a class="close-link"><i class="fa fa-close"></i></a>
												</li>
											</ul>
											<div class="clearfix"></div>
										</div>			  
										<div id ="flt" class="x_content"><br><br>
											<div id="div_filter">
												Add Filters&nbsp;&nbsp;&nbsp;&nbsp;:
												<select id="filter">
													<option value="select">--select--</option>
													<option value="mcus">A</option>
													<option value="oc">B</option>
												</select>
												<img id="add-icon" src="add-icon.png" alt="add" onclick="addToFilter('flt');">
												<button id="go" type="submit" value="Submit" style="margin-left: 185%; width:14%">Go</button>
											</div>
											<br>										
										</div>
									</div>
								</div>

Answer 1

使用 insertBefore 来添加元素。 https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

function addToFilter(divName) {
  var val = document.getElementById('filter').value;
  var newdiv = document.createElement('div');
  switch (val) {
    case 'mcus':
      newdiv.innerHTML = "Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:<select id='mcuc_selection'><option value='select'>--select--</option><option value='a1'>A1</option><option value='m1'>M1</option><option value='n1'>N1</option></select>";
      break;
    case 'oc':
      newdiv.innerHTML = "Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:<select id='oc_selection'><option value='select'>--select--</option><option value='a2'>A2</option><option value='m2'>M2</option><option value='n2'>N2</option></select>";
      break;
  }
  var ParentNode = document.getElementById(divName);
  var theFirstChild = ParentNode.firstChild;
  ParentNode.insertBefore(newdiv, theFirstChild);
}

<div class="col-md-12 col-sm-12 col-xs-12">
  <div class="x_panel">
    <div class="x_title">

      <ul class="nav navbar-right panel_toolbox">
        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
        </li>
        <li><a class="close-link"><i class="fa fa-close"></i></a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div id="flt" class="x_content">
      <br>
      <br>
      <div id="div_filter">
        Add Filters&nbsp;&nbsp;&nbsp;&nbsp;:
        <select id="filter">
          <option value="select">--select--</option>
          <option value="mcus">A</option>
          <option value="oc">B</option>
        </select>
        <img id="add-icon" src="add-icon.png" alt="add" onclick="addToFilter('flt');">
        <button id="go" type="submit" value="Submit" style="margin-left: 185%; width:14%">Go</button>
      </div>
      <br>
    </div>
  </div>
</div>