使用javascript修改html元素并创建新元素

我有下面的代码

<input type="text" />
<button> Submit </button>

提交

现在，当用户键入一些输入并单击submit按钮时，我希望输入文本变为不可编辑，但文本仍应存在。此外，submit按钮应消失。此外，在输入文本框下面，我想创建另一个输入文本，该文本与带有提交按钮的原始文本类似。这就像是一个评论系统。有没有关于如何使用javascript实现这一点的想法。

<input type="text" />
<button> Submit </button>


$('button').click(function() {
    $(this).hide();
    $('input').prop('disabled', true);
})

提交
$（“按钮”）。单击（函数（）{
$（this.hide（）；
$（'input'）.prop（'disabled'，true）；
})

提交
$（“按钮”）。单击（函数（）{
$（this.hide（）；
$（'input'）.prop（'disabled'，true）；
})

---

下面是一个非常简单的方法。但是，对于不引人注目的Javascript，您应该以编程方式将

onclick

事件绑定到按钮。或者更好的是，使用jQuery，它总是抽象事件，这就是为什么我们如此喜欢它

 <script>
 function disableInput() {
  document.getElementById("foo").disabled = true;
  document.getElementById("bar").style.display = "none";
 }
 </script>

<input id="foo" type="text" value="Some Text" />
<button id="bar" onclick="disableInput();"> Submit </button>

函数disableInput（）{
document.getElementById（“foo”）.disabled=true；
document.getElementById（“bar”）.style.display=“无”；
}
提交

下面是一个非常简单的方法。但是，对于不引人注目的Javascript，您应该以编程方式将

onclick

事件绑定到按钮。或者更好的是，使用jQuery，它总是抽象事件，这就是为什么我们如此喜欢它

 <script>
 function disableInput() {
  document.getElementById("foo").disabled = true;
  document.getElementById("bar").style.display = "none";
 }
 </script>

<input id="foo" type="text" value="Some Text" />
<button id="bar" onclick="disableInput();"> Submit </button>

函数disableInput（）{
document.getElementById（“foo”）.disabled=true；
document.getElementById（“bar”）.style.display=“无”；
}
提交

请在以下位置尝试此解决方案

如果要复制内容，请确保删除id。它们必须是每页唯一的。以下是html：

<p class="comment">
  <input type="text" value="Initial Text" />
  <button>Submit</button>
</p>

请尝试此解决方案

如果要复制内容，请确保删除id。它们必须是每页唯一的。以下是html：

<p class="comment">
  <input type="text" value="Initial Text" />
  <button>Submit</button>
</p>

---

我想要一个文本框，而不是div。第二，单击submit之后，itI后面应该会出现另一个类似的东西，我想要一个文本框，而不是div。第二，单击“提交”后，应该会出现另一个类似的内容