如何保留表单自动清场功能同时持久更新元素innerHTML？

你的问题根源是form里的button默认是submit类型，点击后会触发表单提交，导致页面刷新，所以p标签的内容刚显示就被刷新掉了。完全不需要用数据库或LocalStorage，以下几种简单方案就能解决：

方案1：阻止表单默认提交行为，手动清空输入框 #

修改JS函数，在触发时阻止表单的默认提交动作，之后手动清空输入框：

const paragraph = document.querySelector(".paragraph")
const input = document.querySelector("input")

const updInnerHTML = (event) => {
  // 阻止表单提交的默认行为
  event.preventDefault();
  paragraph.innerHTML = input.value;
  // 手动清空输入框
  input.value = "";
}

对应的HTML里，点击按钮时要传递event参数：

<form>
  <input type="text" placeholder="Type Something">
  <button onclick="updInnerHTML(event)">Update InnerHTML</button>
</form>

<p class="paragraph"></p>

方案2：修改按钮类型为button #

把button的type设为button，这样它就不会触发表单提交，之后同样手动清空输入框：

const paragraph = document.querySelector(".paragraph")
const input = document.querySelector("input")

const updInnerHTML = () => {
  paragraph.innerHTML = input.value;
  input.value = "";
}

HTML修改按钮的type属性：

<form>
  <input type="text" placeholder="Type Something">
  <button type="button" onclick="updInnerHTML()">Update InnerHTML</button>
</form>

<p class="paragraph"></p>

方案3：监听表单的submit事件 #

通过监听form的submit事件来处理逻辑，同样阻止默认提交，完成更新和清空：

const paragraph = document.querySelector(".paragraph")
const input = document.querySelector("input")
const form = document.querySelector("form")

form.addEventListener('submit', (event) => {
  event.preventDefault();
  paragraph.innerHTML = input.value;
  input.value = "";
})

HTML可以去掉按钮的onclick属性：

<form>
  <input type="text" placeholder="Type Something">
  <button>Update InnerHTML</button>
</form>

<p class="paragraph"></p>

这三种方案都能让p标签的内容持久显示，同时保留清空输入框的功能，全程不需要用到数据库或LocalStorage。

内容的提问来源于stack exchange，提问作者supremeincubator