Edit in JSFiddle

var outter = document.getElementById("outter");
var center = document.getElementById("center");
var el = [];

function insertEl(dir) {
	var newNode = document.createElement("button");
  var count = el.length + 1;
  newNode.innerHTML = "새로만든 버튼 : " + count;
  if (dir == "last") {
  	outter.appendChild(newNode); // outter 요소의 lastChild로 삽입
  } else {
  	outter.insertBefore(newNode, center); // outter요소의 center 요소 이전에 삽입
  }
  el.push(newNode);
}

function removeLast() {
	var node = el.pop();
 	outter.removeChild(node); // 노드 삭제
}

function replaceLast() {
	var newNode = document.createElement("input");
  var count = el.length;
  newNode.value = "교체된 input : " + count;
  outter.replaceChild(newNode, el[count-1]); 
  el[count-1] = newNode;
}

<button type="button" onclick="insertEl('last')">appendChild() 끝에 요소생성</button>
<button type="button" onclick="insertEl('before')">insertBefore() 기준 위에 요소생성</button>
<button type="button" onclick="removeLast()">마지막 요소삭제</button>
<button type="button" onclick="replaceLast()">replace 마지막 요소교체</button>
<hr>
<div id="outter">
  <div id="center">기준 입니다.</div>
</div>

#outter {
  border:1px solid #ccc;
  padding: 20px;
}