javascript - 如何使用javascript添加基于按钮单击的重复元素？

Question

下面给出了如何使用按钮单击示例代码添加重复元素我无法设置可以基于单击添加多个 div 元素的正确事件。

   const Form =  document.createElement('form)
   const Input = document.createElement('input')   
   const Button = document.createElement('button')     
   const NewDiv = document.createElement('div').className = "repeatedBlock" 

   NewDiv.append(Input)
   NewDiv.append(Button)
   Form.append(NewDiv)
    
   Button.onclick = function changeContent() {
      // append multiple NewDiv in the Form element based on every click
   }

标签： javascripthtmlforms

Answer 1

在这段代码中，我创建了一个表单，然后调用一个在其中创建 div 和绑定事件的函数。如果需要更多详细信息，请告诉我。更改名称，为每个字段提供 id。这些取决于你。

const Form =  document.createElement('form');
Form.id = "form";  
document.body.appendChild(Form);
     const Button = document.createElement('button') ; 
Button.textContent ="Click";
Button.addEventListener("click", function(e){ e.preventDefault(); createDiv() });
Form.appendChild(Button);
createDiv();

function createDiv() {
var i = document.getElementById('form');
  const NewDiv = document.createElement('div');
  const Input  = document.createElement('input')   ;

  NewDiv.append(Input);   
i.appendChild(NewDiv);

}