Javascript 单击时将一个按钮替换为另一个按钮

我是stackoverflow的新手，也是一名业余javascript程序员。我试图制作一个程序，当我点击一个按钮时，会出现一个提示，询问我的名字。除此之外，我还希望该按钮消失，并替换为另一个值为：Hello‘name’的按钮。我该怎么做？我目前在javascript中的代码询问我的名字，但并没有使按钮消失。我目前的工作如下：

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

和按钮的我的html：

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

---

这将起作用，它不会删除按钮，而是再次使用它作为用户输入的名称

HTML

名字在这里

JS

另一种方法

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

---

它可以在JSFIDLE中工作，但不能在我的html文件中工作，我非常确定语法是正确的。你有什么建议？我会把这个答案标记为正确的，因为代码在JSFIDLE中工作得非常好，但问题出在我的实际计算机中的某个地方。当我将相同的js和html代码放在JSFIDLE中时，它起了作用。我猜这是因为javascript在加载DOM之前运行。检查这个解决方案的答案，以便在加载DOM后执行代码：我将在加载DOM后尝试执行代码，但在您给我的js中，.addEventListener中有一个名为function的函数。我已经有一个叫这个名字的了。那么，如果我把它的名字改成喜欢，命名，它会工作吗？

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