javascript - 如何在用户单击按钮时显示文本区域和按钮，但它不是模式

Question

在这种形式中，我希望当用户点击按钮时，它在用户点击的按钮下方显示文本区域和按钮。很像发票或预付票据。在文本区域，用户可以写任何注释或修订，只是纯文本。这是按钮代码的示例 <button type="button" id="revision" onclick="myFunction()" class>Revision</button>这是 JavaScript

<script> 
function myFunction() { 
document.getElementById("demo").innerHTML = <textarea style="resize: none; width: 400px; height: 100px;" type="text" class="form-control" rows="3"></textarea>;}
</script>

我试过了，但按钮没有显示文本区域。非常感谢

Answer 1

可以使用append函数动态插入dom元素。

function myFunction() {
  let textarea = document.createElement('textarea');
  textarea.classList = ['form-control'];
  textarea.rows = 4;
  document.getElementById("demo").append(textarea);
}

<button onclick="myFunction()">
Add Text Area
</button>

<div id="demo"></div>