Кнопка «Добавить» создаст новую текстовую область

Возможно ли, что кнопка «Добавить» будет генерировать новые textarea в форме? Я искал целый день, но не смог найти никакой логики, чтобы сделать функцию «Добавить», которая генерирует новые textarea.

h1,h2,h3,h4,h5,p,table {font-family: Calibri;}
.content {
  margin: 0 auto;
  width: 75%;
  margin-top: 15px;
}
table.addbutton {
  border: solid black 1px;
  width: 100%;
  height: auto;
}
td,th,tr {
  border: solid black 1px;
  text-align: center;
}
textarea {
  width: 100%;
  margin: 0;
  overflow: hidden
}
<div class="content">
  <table class="addbutton">

    <form action="" method="post">

      <!-- Title -->
      <tr style="color:White;">
        <th bgcolor="#82BBE8">Fixed Title A</th>
        <th bgcolor="#82BBE8">Fixed Title B</th>
        <th bgcolor="#82BBE8">Fixed Title C</th>
        <th bgcolor="black">Fixed Title D</th>
        <th bgcolor="#82BBE8">Fixed Title E</th>
        <th bgcolor="black">Fixed Title F</th>
        <th bgcolor="#82BBE8">Fixed Title G</th>
      </tr>
      <!-- Title end -->

      <tr style="color:White;">

        <td rowspan="2" width="auto" bgcolor="#82BBE8">Title Example</td>

        <td style="color:Black">
          <p align="right"><input type="button" alt="AddColumn" value="Add"></p>
          <br>
          <h5>When we click "Add" button will show new textarea</h5>
          <textarea placeholder="Please input text here.."></textarea>
        </td>

        <td style="color:Black">
          Example 1
        </td>

        <td style="color:Black">
          Example 2
        </td>

        <td style="color:Black">
          Example 3
        </td>

        <td style="color:Black">
          Example 4
        </td>

        <td style="color:Black">
          Example 5
        </td>

      </tr>

      <tr>
        <td>
          <br>
          <p align="right"><input type="button" alt="AddColumn" value="Add"></p>
          <h5>When we click "Add" button will show new textarea</h5>
          <textarea placeholder="Please input text here.."></textarea>
        </td>

        <td style="color:Black">
          Example 5
        </td>

        <td style="color:Black">
          Example 6
        </td>

        <td style="color:Black">
          Example 7
        </td>

        <td style="color:Black">
          Example 8
        </td>

        <td style="color:Black">
          Example 9
        </td>
      </tr>


  </table>
  </form>
</div>
</body>


javascript jquery
person Kijiya    schedule 15.03.2018    source источник
comment
Возможный дубликат создания текстовой области с помощью javascript   -  person Dan Bracuk    schedule 15.03.2018
comment
@DanBracuk это отличается от того, что я хочу   -  person Kijiya    schedule 15.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вот пример создания текстовой области

function myFunction() {
    var x = document.createElement("FORM");
    x.setAttribute("id", "myForm");
    document.body.appendChild(x);

    var y = document.createElement("TEXTAREA");
    document.getElementById("myForm").appendChild(y);
}
<button onclick="myFunction()">Add</button>

person Melchia    schedule 15.03.2018
comment
Спасибо, бро, я постараюсь решить свою проблему, и если что-то случится, я перезвоню тебе. - person Kijiya; 15.03.2018
comment
Хм, у вас есть идея, когда я нажимаю кнопку добавления, текстовая область будет отображаться в целевом месте, где я хочу. - person Kijiya; 15.03.2018