Replace HTML button with text/code when clicked

Question

I would like to have a button that disappears when clicked on and replaced with something else. The code below causes the words "Some text" to appear below the button when it's clicked on. That's not quite what I want though -- how do I get "Some text" to appear in place of the button?

<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>

1. inside the click listener, you can use this to get the button 2. simply use node.remove() — user5734311
– user5734311, Commented May 3, 2022 at 10:25

Yogi · Accepted Answer · 2022-05-03 10:46:16Z

2

Replacing this.outerHTML also works and keeps it simple:

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

answered May 3, 2022 at 10:46

Yogi

7,4943 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dani herrera Over a year ago

I also like potatoes 😊

TonyBnda · Accepted Answer · 2022-05-03 10:36:54Z

0

You can do something like this :

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

answered May 3, 2022 at 10:36

TonyBnda

1

Comments

Elias Schablowski · Accepted Answer · 2022-05-04 06:23:02Z

0

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

edited May 4, 2022 at 6:23

Elias Schablowski

2,84211 silver badges20 bronze badges

answered May 3, 2022 at 12:53

svw055

957 bronze badges

Collectives™ on Stack Overflow

Replace HTML button with text/code when clicked

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related