javascript - JQuery，创建多个具有升序ID的html元素？

Question

这是需要做的:

<input type="text" id="main" placeholder="Put URL Here">

每次用户按下输入(或屏幕侧面的按钮)时，我都需要 Jquery 来创建:

<input type="hidden" id="url_1" readonly value='<-- input value from main-->'>
<!-- user adds another to #main -->
<input type="hidden" id="url_2" readonly value='<-- input value from main-->'>
<!-- etc -->

这是我到目前为止得到的(仅使用 HTML)

<figure class="mb-4">
<input type="text" name="" id="" placeholder="Image URL">
<button id="addimage">Add Image</button>
<button id="uploadimage_js">Upload Image</button>
</figure>

对于上传图片按钮，它向我的 PHP 上传图片提交一个图片，并返回图片的 URL

Answer 1

这会将隐藏的输入附加到 <form> 的末尾。标签。它还保留了一组 url，以备不时之需。对于此代码段，它在 div 中显示数组。

let urls = [], limit = 2, main, addButton, resetButton
window.addEventListener('load', () => {
  main = document.querySelector('#main'),
  addButton = document.querySelector('[data-url-saver]'),
  resetButton = document.querySelector('[data-url-reset]');
  addButton.addEventListener('click', () => saveURL())
  resetButton.addEventListener('click', () => reset())
  })

const saveURL = () => {
  let u = main.value;
  urls.push(u);
  let h = `<input type="hidden" data-url-hidden id="url_${urls.length}" readonly value=${u} />`
  document.querySelector('form').insertAdjacentHTML('beforeend', h);
  main.value = "";
  let de = document.querySelector('#debug');
  de.innerHTML = urls.join(", ");
  if (urls.length >= limit) {
    addButton.setAttribute('disabled', 'disabled');
    main.setAttribute('disabled', 'disabled');
    main.setAttribute('placeholder', 'Maximum URLs accepted')
  }
}

const reset = () => {
  urls = [];
  document.querySelectorAll('[data-url-hidden]').forEach(e => e.parentNode.removeChild(e));
  addButton.removeAttribute('disabled');
  main.removeAttribute('disabled');
  document.querySelector('#debug').innerHTML = "";
}

<form>
  <input type="text" id="main" placeholder="Put URL Here">
  <button data-url-saver type='button'>enter</button>
  <button data-url-reset type='button'>reset</button>
</form>

<div id='debug'></div>