时间戳

首页 > 解决方案 > 从 JavaScript 添加 HTML 会从输入中删除书面文本

javascript - 从 JavaScript 添加 HTML 会从输入中删除书面文本

问题描述

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

问题是，当添加一个新的文本区域时，写入其他文本区域的文本会被删除。

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

before_click

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

after_click

代码：

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

标签： javascripthtml

解决方案

innerHTML重建整个内容。尝试以下操作：

<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').insertAdjacentHTML('beforeend', template);
    }
  </script>
</head>

<body>
  <div class="container">

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


</body>

</html>

有关 innerHTML 的更多信息，请单击此处

推荐阅读