HTML和Javascript，如何使按钮出现在函数中？

我还不熟悉HTML和JS，但我想做一个函数，让一个按钮出现在网页上。。。我尝试过以下几件事：

HTML:

JS:

但当然，这是行不通的。我很想听到一个好方法来实现这一点。 提前谢谢

它应该出现。 您必须删除innerHtml或使用单引号，以便在混合它们时不会弄乱：

function buttonFunction(){
     document.getElementById("buttonAppear").innerHTML = '<button onclick="secondFunction()">Some text here</button>';
}

---

正如安德里亚在他的回答中指出的那样，问题在于你使用了引号。只有在转义内部双引号时，您的版本才能工作，如下所示：

功能按钮功能{ document.getElementByIdbuttonAppear.innerHTML=此处的一些文本； }

---

如果按钮总是一样的，你可以动态地显示和隐藏它

/*In your CSS*/
 .hidden {
    display: none;
}
.show {
   display: inline;
}
<!-- In your HTML -->
<button id="button" class="hidden">test</button>

// In your js
function toggleButton() {
    document.getElementById("button").className = 'show'; 
}

---

您需要首先转义要附加到DOM的内容。您可能还希望在加载页面或发生其他事件时运行此操作

当页面完全加载时，使用jQuerys.ready将加载您拥有的任何内容。然后传入函数：

$(document).ready(function(){
  document.getElementById("buttonAppear").innerHTML = '<button
    onclick=\'secondFunction()\'>Some text here</button>';
});

---

为什么不起作用？你有没有出错，你试过调试它吗？最有可能的原因是报价。尝试使用“而不是在按钮周围使用html\可能会很有用。基本的东西。啊，是的，这很有效。简单的初学者错误。。。现在觉得自己很愚蠢，哈哈。。谢谢你的回答！几分钟后接受。

/*In your CSS*/
 .hidden {
    display: none;
}
.show {
   display: inline;
}
<!-- In your HTML -->
<button id="button" class="hidden">test</button>

// In your js
function toggleButton() {
    document.getElementById("button").className = 'show'; 
}

$(document).ready(function(){
  document.getElementById("buttonAppear").innerHTML = '<button
    onclick=\'secondFunction()\'>Some text here</button>';
});