Replace one button with another on click

Question

I am new to stackoverflow, and I am also an amateur javascript programmer. I am trying to make a program in which, when I click one button, a prompt appears, asking for my name. Alongside that, I also want that button to disappear, and be replaced with another button with the value: Hello 'name'. How do I do this? My code that I currently have in javascript asks me for my name, but does not make the button disappear. My current js is as follows:

var button = document.getElementById("button");
function naming() {
    var getName = prompt("What is your name?");
    button.style.display = "none";
};

And my html for the button:

<button id="button" onclick="naming();"> Name Here</button>

Answer 1

This would work, it does not remove the button but use it ones again for the name that the user inputs.

HTML

<button id="button">Name here</button>

JS

var button = document.getElementById('button');
button.addEventListener('click', function() {
    var name = prompt("What is your name?");
    this.innerHTML = name
}, false);

http://jsfiddle.net/rYU7Q/

Answer 2

another method

<button class="btn btn-primary" id = "del-btn">Old btn</button>
<div id = "sho-btn"></div>


 <script>
    var a = "<button class='btn btn-primary'>New Button</button>";
    document.getElementById("del-btn").style.visibility = 'hidden';
    document.getElementById("sho-btn").innerHTML = a;
    </script>