js实现点击添加一个input节点

实现点击添加一个input节点，可以通过原生JS或者jQuery来实现。下面分别介绍两种方式的实现步骤。

原生JS实现方式

1. 首先需要在HTML中定义一个按钮和一个容器，当点击按钮时，会在容器中添加一个input节点。

<button id="addInput">添加Input</button>
<div id="container"></div>

1. 在JS文件中监听按钮的点击事件，并执行添加input节点的逻辑。

let btn = document.getElementById('addInput')
let container = document.getElementById('container')
btn.addEventListener('click', function() {
  let input = document.createElement('input')
  container.appendChild(input)
})

其中，我们首先获取按钮和容器的DOM元素，然后通过addEventListener方法监听按钮的click事件，在事件回调函数中创建一个input节点，最后将创建的节点添加到容器中。

jQuery实现方式

1. 在HTML中引入jQuery库，并定义一个按钮和一个容器。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="addInput">添加Input</button>
<div id="container"></div>

1. 在JS文件中监听按钮的点击事件，并执行添加input节点的逻辑。

let btn = $('#addInput')
let container = $('#container')
btn.on('click', function() {
  container.append('<input>')
})

jQuery的实现方式与原生JS的实现方式相似，不同的地方在于选择DOM元素、添加事件处理函数和添加节点的方法不同。当点击按钮时，我们首先通过jQuery选择器获取按钮和容器的DOM元素，然后通过.on方法监听按钮的click事件，在事件回调函数中使用.append方法添加一个新的input节点。

示例说明

下面将通过两条示例说明原生JS实现方式和jQuery实现方式的区别。

示例一

我们有一个输入框和一个按钮，输入框中有一个默认值。当点击按钮时，会在输入框下方添加一个新的输入框。

原生JS实现方式

HTML代码

<input type="text" value="默认值" id="input">
<button id="addInput">添加</button>
<div id="container"></div>

JS代码

let btn = document.getElementById('addInput')
let container = document.getElementById('container')
let input = document.getElementById('input')

btn.addEventListener('click', function() {
  let newInput = input.cloneNode(true)
  newInput.value = ''
  container.appendChild(newInput)
})

上面的代码中，我们首先获取按钮、容器和输入框的DOM元素，然后绑定按钮的点击事件，在事件回调函数中使用cloneNode方法克隆输入框，将克隆的节点里的值清空，并将节点添加到容器中。

jQuery实现方式

HTML代码

<input type="text" value="默认值" id="input">
<button id="addInput">添加</button>
<div id="container"></div>

JS代码

let btn = $('#addInput')
let container = $('#container')
let input = $('#input')

btn.on('click', function() {
  container.append(input.clone().val(''))
})

上面的代码中，我们使用了jQuery的选择器和操作方法，代码量更少。在按钮的click事件回调函数中，先通过选择器获取容器和输入框的DOM元素，然后使用jQuery的.clone和.val方法复制并清空输入框的值，并通过.append方法添加新的输入框节点到容器中。

示例二

我们有一个输入框，点击按钮会将输入框的值添加到一个列表中。

原生JS实现方式

HTML代码

<input type="text" id="input">
<button id="addToList">添加到列表</button>
<ul id="list"></ul>

JS代码

let btn = document.getElementById('addToList')
let list = document.getElementById('list')
let input = document.getElementById('input')

btn.addEventListener('click', function() {
  let li = document.createElement('li')
  li.textContent = input.value
  list.appendChild(li)
  input.value = ''
})

上面的代码中，我们通过JS获取按钮、列表和输入框的DOM元素，然后在按钮的点击事件回调函数中，使用.createElement方法创建一个新的li节点，将输入框中的值添加到新节点中，再通过.appendChild方法添加节点到列表中，并将输入框的值清空。

jQuery实现方式

HTML代码

<input type="text" id="input">
<button id="addToList">添加到列表</button>
<ul id="list"></ul>

JS代码

let btn = $('#addToList')
let list = $('#list')
let input = $('#input')

btn.on('click', function() {
  list.append($('<li>').text(input.val()))
  input.val('')
})

上面的代码中，我们先通过jQuery选择器获取按钮、列表和输入框的DOM元素，然后在按钮的点击事件回调函数中，使用jQuery的.append方法添加一个新的li节点到列表中，将输入框的值添加到新节点中并清空输入框。需要注意的是，我们在.append方法中使用了一个匿名函数，用于创建新的li节点，并设置其文本内容。