javascript - 如何通过单击 Javascript 来替换按钮

Question

当我尝试通过单击它们来删除元素时。我遇到了一些麻烦。

当我创建元素并将其附加到元素时，前一个元素没有被删除。

我想要的结果是将它们替换为新按钮。

我怎样才能实现它？如果你有意见，请告诉我。

谢谢

document.getElementById("btn").addEventListener("click",function(){
  
      let btn = document.getElementById("btn");
      let button = document.createElement("button");
      button.textContent = 'retry';
      button.className = 'retry';
      
      btn.appendChild(button);

})

<div id="btn"><button>test</button></div>

Answer 1

使用 Node.replaceChild() 方法:

document.getElementById("btn").addEventListener("click",function(){
  let btn = document.getElementById("btn");
  let button = document.createElement("button");
  button.textContent = 'retry';
  button.className = 'retry';

  btn.parentNode.replaceChild(button, btn);
})

<div id="btn"><button>test</button></div>