时间戳

首页 > 解决方案 > 可以在 Div 的代码中插入 javascript 版本的 print 吗？

javascript - 可以在 Div 的代码中插入 javascript 版本的 print 吗？

问题描述

当用户单击添加或减去用户按钮时，我有一个表单可以添加和减去一个较小的表单。

我想要做的是每次用户点击添加按钮到 div 标签内的 ID 标签时添加 +1 .. 令人困惑的是，我知道这是原始标签：

<div id="formwrap" class="test" name="test">im a form in this formwrap</div>

现在说用户单击添加按钮，一个新表单将在当前表单下方弹出，并使用 javascript 的打印或回显版本，这将是使用 .append(html) 或类似内容为 div 创建的新代码这也是：

<div id="formwrap" class="test" name="test">im a form in this formwrap</div>
<div id="formwrap" class="test2" name="test2">im a form in this formwrap</div>

依此类推，您可以在接下来看到，如果有人单击添加按钮，则 2 将更改为 3

<div id="formwrap" class="test(+1 code would go here)" name="test(+1 code would go here)">im a form in this formwrap</div>

所以在我编码之前这甚至可能吗？我希望能够对较小的表单进行不同的样式设置，并且我希望 phpmailer 能够根据点击次数来检索所有数据。并添加 +1 每个标签也可以实现这两个目标。

标签： javascripthtml

解决方案

//Create a private counter var
const counter = (function() {
  var formCount = 0;
  return {
    value: () => formCount,
    increment: () => ++formCount
  }
})();

//A function that will generate a "form" element
const ID_PREFIX = 'formwrap_';
const generateFormEl = () => {
  let el = document.createElement('div');
  el.setAttribute('id', `${ID_PREFIX}${counter.increment()}`);
  el.setAttribute('class', 'test');
  el.setAttribute('name', 'test');
  el.appendChild(document.createTextNode(`ID: ${el.getAttribute('id')}`));
  return el;
};

//Store your DOM elements in some vars
const forms = document.querySelector('#forms');
const btn = document.querySelector('[type="button"]');

//Add a form element to the DOM on click
btn.addEventListener('click', () => {
  const form = generateFormEl();
  forms.appendChild(form);
});
<div id="container">
  <input type="button" value="Add a form" />
  <div id="forms"></div>
</div>

推荐阅读