javascript - 尝试替换元素时整个 div 被替换

Question

我想用另一个元素替换一个元素。 然而，该元素与其他元素一起放置在一个 div 中。 当我运行代码时，整个 div 都会被替换。 如何防止这种行为？

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

您不应该将文本节点附加到输入框。您应该设置该值。

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);
}