Whole div is replaced while trying to replace an element

Question

I want to replace an element by another. The element however is placed in an div with other elements. When I run my code the whole div is replaced. How do I prevent this behavior?

function edit(e) {
   selectedElement = e.id
   var newElement = document.createElement("input");
   var newElementA = document.createTextNode("bla");
   newElement.appendChild(newElementA);
   var oldElement = document.getElementById(selectedElement);
   var parentDiv = oldElement.parentNode
   parentDiv.replaceChild(newElement, oldElement);
}

Answer 1

You shouldn't be appending a text node to an input box. You should set the value.

Here is a working codepen, based on your comments.

<div id="parentDiv">
  <div>
    hi
  </div>
  <a id="pleaseReplace" onclick="edit(event)">hi2</a>
  <div>
    hi3
  </div>
</div>


function edit(e) {
  selectedElement = document.getElementById(e.srcElement.id);
  var newElement = document.createElement("input");
  newElement.value = selectedElement.innerHTML;
  var parentDiv = selectedElement.parentNode
  selectedElement = parentDiv.replaceChild(newElement, selectedElement);
}