Question

我还是HTML和JS的新手，但是我想制作一个让按钮出现在网页上的功能......我尝试过这样的事情：

HTML：

<span id="buttonAppear"></span>

JS：

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

但当然，这没有用。我很想听到让这种事情发生的好方法。提前谢谢！

Answer 1

它应该出现。你必须削减你的innerHtml或使用单引号，这样你混合时就不会搞乱：

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

Answer 2

问题是你使用引号，正如Andrea在他的回复中指出的那样。您的版本仅在您转义内部双引号时才有效，如下所示：

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

Answer 3

您需要首先逃避您附加到DOM的内容。你也可能想在页面加载或其他事件发生时运行它。

使用jQuerys .ready（）将加载完全加载页面时的所有内容。然后传递你的功能：

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

Answer 4

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

/*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'; 
}

HTML＆amp; Javascript，如何在一个函数中出现一个按钮？

4 个答案: