선택 상자 이벤트에 추가 된 동적 양식 요소를 선택 상자 위의 페이지 맨 위에 차례대로 정렬

Question

선택 상자 이벤트에 추가 된 동적 양식 요소를 차례대로 페이지 상단에 정렬 할 수 없습니다 . 선택 상자 위에 추가되면 선택 상자가 자동으로 아래쪽으로 이동해야합니다. 하지만 내 코드는 요소 downwords 선택 상자에 겹쳐 추가했습니다.

\t \t function addToFilter(divName) 
 
\t \t { 
 
\t \t \t var val= document.getElementById('filter').value; 
 
\t \t \t var newdiv = document.createElement('div'); 
 
\t \t \t switch(val) 
 
\t \t \t { 
 
\t \t \t \t case 'mcus': 
 
\t \t \t \t 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>"; 
 
\t \t \t \t break; 
 
\t \t \t \t case 'oc': 
 
\t \t \t \t 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>"; 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t document.getElementById(divName).appendChild(newdiv); 
 
\t \t }

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