我正在开发一个网页,通过该网页用户可以添加问题和答案。要添加新问题,用户单击按钮,然后将新的div添加到容器中。



问题在于,当添加新的文本区域时,将删除在其他文本区域中写入的文本。



单击按钮之前填充文本区域的视图





单击按钮后的文本区域视图





码:



<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript">
    const template = '<form class="eachtest">' +
      '<textarea id="question" rows="4" cols="80" placeholder="Sual"></textarea>' +
      '<br><strong> A </strong> ' +
      '<textarea class="answer" rows="4" cols="80" placeholder="Cavab"></textarea><br>' +
      '</form>';

    function on_click() {
      document.querySelector('.container').innerHTML += template;
    }
  </script>
</head>

<body>
  <div class="container"></div>
  <button id="add" type="button" name="button" onclick="on_click()">add</button>
</body>

</html>

最佳答案

由于您应该避免使用内联JS和CSS,因此向您提出以下建议:


在HTML中创建隐藏的div id="template"
当您单击“添加”按钮时,使用JS将其内容附加到您的容器之后。
我也将您的id="question"更改为class="question",因为您可以添加多个。




const template = document.querySelector('#template').innerHTML;
var container = document.querySelector('.container');
document.querySelector('#add').onclick = function() {
  container.insertAdjacentHTML('beforeend', template);
}

#template {
  display: none;
}

<html lang="en" dir="ltr">

<body>
  <div class="container"></div>
  <button id="add" type="button" name="button">Add</button>
  <div id="template">
    <form class="eachtest"><textarea class="question" rows="4" cols="80" placeholder="Sual"></textarea><br> <strong> A </strong><textarea class="answer" rows="4" cols="80" placeholder="Cavab"></textarea><br></form>
  </div>
</body>

</html>





希望能帮助到你。

07-24 09:47
查看更多