appendChild(), insertBefore()

appendChild(노드)

자식 노드의 뒤에 노드가 삽입됨.

소스코드

<form id="form">
  <input class="param" id="param1" value="seogineer" />
  <input class="param" id="param2" value="" />
</form>

let el = document.getElementById('form');
let input = document.getElementById('param1');

el.appendChild(input);

결과

<form id="form">
  <input class="param" id="param2" value="">
  <input class="param" id="param1" value="seogineer">
</form>

insertBefore(노드, 기준 노드)

기준 노드의 앞에 노드가 삽입됨.

소스코드

<form id="form">
  <input class="param" id="param1" value="seogineer">
  <input class="param" id="param2" value="">
</form>

let el = document.getElementById('form');
let input = document.getElementById('param1');

el.insertBefore(input, el.childNodes[4]);    // el.childNodes[4] 앞에 input이 삽입됨.

결과

<form id="form">
  <input class="param" id="param2" value="">
  <input class="param" id="param1" value="seogineer">
</form>