使用表单数据并基于它生成 HTML

Question

寻找一些东西来从像这样的表单中获取数据：

<form id="rendered-form" name="rendered-form">
  <div class="rendered-form">
    <div class="fb-text form-group field-text-1534368808722">
      <label class="fb-text-label" for="text-1534368808722">Name</label><input class="form-control" id="text-1534368808722" name="text-1534368808722" type="text">
    </div>
    <div class="fb-text form-group field-text-1534368811041">
      <label class="fb-text-label" for="text-1534368811041">Email</label><input class="form-control" id="text-1534368811041" name="text-1534368811041" type="text">
    </div>
    <div class="fb-text form-group field-text-1534368811041">
      <label class="fb-text-label" for="text-1534368811041">Link</label><input class="form-control" id="text-1534368811041" name="text-1534368811042" type="text">
    </div>
  </div>
</form>

并将数据插入到 HTML 模板中。例如：

<div class="name">FORM TEXT HERE</div>
<div class="email">FORM TEXT HERE</div>
<a href="FORM TEXT HERE">link</a>

如果可能的话，我很乐意为此使用 Vue.js，我一直在玩弄它，这似乎是它能够做到的。

我正在尝试使用它来快速制作 AMP 页面（我知道我可以以编程方式完成，但由于限制，我目前无法）。我不想拥有数据库，它不需要存储它。我只是希望能够插入我的数据，按下一个按钮，然后让它根据模板和提供的数据吐出 HTML 或 HTML 文件并完成。

Answer 1

如果您已经处理了表单提交，您可以使用 js 选择器更改 div 的内容，如下所示：

document.getElementsByClassName("name")[0].innerHTML = nameFromFormInput;