javascript - 向已使用 innerHTML 的 div 添加按钮

Question

我正在尝试使用 JS 显示测验的分数，并为其提供一个完成按钮以将数据发送到数据库并返回到另一个页面。我可以显示分数测试但不能显示按钮

<div class="container" id="quiz">
<h1>Quiz</h1>
<div class="quiz material-main">
  <h3 id="questions" ></h3>
  <div id= "audios" ></div>
  <div id="images" ></div>
        <div id="choices" ></div>
  <div class="quizBtn">
        <br />
            <button id="backBtn" class="backBtn" style="font-family: sans-serif; font-size: 22px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin-bottom: 20px;">Back</button>
    <button id="nextBtn" class="nextBtn" style="font-family: sans-serif; font-size: 22px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin-bottom: 20px;">Next</button>
        </div>
</div>
<div class="complete"></div>
</div>

JS:

if (counter >= data.length) {
           var score = Math.round(numCorrect/data.length*100);
          $('.quiz').hide().fadeIn("slow");
          document.getElementById('quiz').innerHTML="Quiz Complete! You scored " + numCorrect + " out of " + counter;
          document.getElementById('quiz').appendChild('<button id="complete" class="nextBtn" style="font-family: sans-serif; font-size: 22px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin-bottom: 20px;">Complete</button>')
          return score; // returns false *(there has to be a better way! figure it out.)*
        }

Answer 1

appendChild()用于节点，可以再用innerHTML

尝试:

document.getElementById('quiz').innerHTML += '<button id="complete" class="nextBtn" style="font-family: sans-serif; font-size: 22px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin-bottom: 20px;">Complete</button>';

并且不要忘记 ;