Edit in JSFiddle

function insertHTML(pos) {
  var center = document.getElementById('center');
  var newNode = document.createElement("div");
  var str = "";
  switch (pos) {
    case 'beforebegin':
      str = " : 이전 형제 요소로 삽입";
      break;
    case 'afterbegin':
      str = " : 첫번째 자식요소로 삽입";
      break;
    case 'beforeend':
      str = " : 마지막 자식요소로 삽입";
      break;
    case 'afterend':
      str = " : 다음 형제 요소로 삽입";
      break;
  }
  newNode.innerHTML = pos + str;
  center.insertAdjacentHTML(pos, newNode.outerHTML);
}

<button type="button" onclick="insertHTML('beforebegin')">
  insertAdjacentHTML('beforebegin')<br>previousSibling 이전 형제 요소로 삽입
</button><br>
<button type="button" onclick="insertHTML('afterbegin')">
  insertAdjacentHTML('afterbegin')<br>firstChild 첫번째 자식 요소로 삽입
</button><br>
<button type="button" onclick="insertHTML('beforeend')">
  insertAdjacentHTML('beforeend')<br>lastChild 마지막 자식 요소로 삽입
</button><br>
<button type="button" onclick="insertHTML('afterend')">
  insertAdjacentHTML('afterend')<br>nextSibling 다음 형제 요소로 삽입
</button><br>

<hr>
<div id="outer">
  <div id="center">
    기준요소 입니다.
  </div>
</div>

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

#center {
  background-color: #eee;
  padding: 20px;
}

button {text-align:left}