單擊時用文本/代碼替換 HTML 按鈕

Question

我想要一個按鈕，當點擊它並用其他東西替換時它會消失。 當點擊按鈕時，下面的代碼會導致“Some text”字樣出現在按鈕下方。 但這不是我想要的——如何讓“一些文本”出現在按鈕的位置？

<button id="MyButton">Click</button>

<script>
    function addListener() {
        document.getElementById("MyButton").addEventListener("click", ReplaceButton, false)
    }

    addListener()

    function ReplaceButton() {
        node = document.getElementById("MyButton")
        node.insertAdjacentHTML("afterend", "<p>Some text</p>") 
    }
</script>

Answer 1

替換this.outerHTML也可以並保持簡單：

 <button onclick="this.outerHTML='<p>some text</p>'">Click</button>

Answer 2

你可以這樣做：

<button id="MyButton">Click</button>
<script>
   document.getElementById("MyButton").addEventListener(
      "click",
      ({ target: button }) => {
        button.insertAdjacentText("afterend", "Some text");
        button.remove();
      },
      false
   );
</script>

Answer 3

function ReplaceButton() {
    // Get the button
    node = document.getElementById("MyButton");
    // Add some HTML after the button (in the buttons parent)
    node.insertAdjacentHTML("afterend", "<p>Some text</p>");
    // Hide the button, optionally remove from tree with `node.remove()`
    node.style.display = "none";
}