Javascript 如何在多次单击时添加输入字段

我试图创建一个按钮，每次单击该按钮时都会创建一个输入字段。当前，当我单击它时，它只创建一个输入字段，如何使每次单击它时都获得一个输入字段

这是我的html：

<div id="new-input-container"> </div>
 <p class="add-new-shareholders-p"><i class="fa fa-plus-circle fa-lg" @click="createNewInputFields"/>

我的职能是：

createNewInputFields() {
      var container = document.getElementById('new-input-container')
      container.innerHTML = "<input type='text'/>";
    }

createNewInputFields（）{
var container=document.getElementById（'new-input-container'）
container.innerHTML=“”；
}

使用

document.createElement

，您可以创建新的

input

HTMLElement，并使用

container.appendChild

函数，您可以将该新元素添加到

div

选择器中，如下所示

函数createNewInputFields（）{
var container=document.getElementById（'new-input-container'）；
const newElem=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
container.appendChild（newElem）；
}

添加新的

根据您的逻辑，您可以尝试以下解决方案之一：

第一个逻辑：通过数字创建输入

<template>
  <div id="app">
    <input type="text" v-for="i in numberOfInputs" :key="i" />
    <br />
    <button @click="addInput">Add input</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    numberOfInputs: 0,
  }),
  methods: {
    addInput: function () {
      this.numberOfInputs++;
    },
  },
};
</script>

添加输入
导出默认值{
名称：“应用程序”，
数据：（）=>({
numberOfInputs:0，
}),
方法：{
addInput:函数（）{
这个.numberOfInputs++；
},
},
};

第二个逻辑：通过值创建输入

<template>
  <div id="app">
    <input
      type="text"
      v-for="(value, i) in values"
      :key="i"
      v-model="values[i]"
    />
    <br />
    <button @click="addInput">Add input</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    values: [],
  }),
  methods: {
    addInput: function () {
      let value = "";
      this.values.push(value);
    },
  },
};
</script>

添加输入
导出默认值{
名称：“应用程序”，
数据：（）=>({
值：[]，
}),
方法：{
addInput:函数（）{
让值=”；
this.values.push（value）；
},
},
};

我刚刚修复了您代码中的错误

要添加新项目，必须使用

+=

。 如果第一次仅使用

=

，则将添加项目。 但每次单击后，该项都将被重写

此选项的问题在于，添加新字段时，已创建字段的内容将被删除

函数createNewInputFields（）{
var container=document.getElementById（'new-input-container'）
container.innerHTML+=“”；
}

单击我

您的函数将正常工作，您需要做的唯一更改是，您可以使用insertAdjacentHTML（）函数，而不是使用innerHTML属性设置值

代码只添加一次输入字段的原因是，innerHTML在这里所做的只是在每次使用赋值运算符（=）设置值时覆盖现有HTML。这是因为innerHTML属性只是从元素中获取innerHTML，就像它是字符串一样。一个选项是将新的输入html包含到现有的innerHTML中，另一个选项是使用insertAdjacentHTML（）函数

insertAdjacentHTML（）每次都会添加相邻的html，包含两个参数，第一个是要插入的位置，可以是（'beforebegin''beforeend''afterbegin''afterend'），在您的情况下最好是'beforeend'。第二个参数是要添加的HTML

document.querySelector（'.btn'）.addEventListener（'click'，createNewInputFields）；
函数createNewInputFields（）{
const container=document.getElementById（'new-input-container'）；
const inputtml=“”；
container.insertAdjacentHTML（'beforeend'，inputtml）；
}

创建字段

您实际上是在使用

innerHTML

替换

容器的内容。你要做的是使用