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

时间：2018-06-05 08:48:43

标签： 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>

3 个答案:

答案 0 :(得分：3)

const client = new kafka.KafkaClient(); const admin = new kafka.Admin(client); admin.describeGroups(['my-consumer-group'], (err, res) => { console.log(JSON.stringify(res, null, 1)); }); 重建整个内容。请尝试以下方法：

＆＃13;
＆＃13; 
innerHTML
＆＃13;
＆＃13;
＆＃13;

有关innerHTML的更多信息，click here

答案 1 :(得分：0)

使用Jquery append（）：D

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<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() {
        $('.container').append(template)

    }

    </script>
  </head>

  <body>
    <div class="container">

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


  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你应该避免使用内联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>

希望它有所帮助。

相关问题
最新问题