如何在不使用javascript清除值的情况下将输入字段追加到div

Question

我有一个代码，它在单击按钮时将包含输入字段和文本的div附加到父div。当我追加div并在字段中输入一些值，然后追加一个新的div时，输入字段的值不知何故变为空。它如何解决这个问题？

代码如下：

let counter = 1;
let new_section = document.getElementsByClassName("addnew")[0];
document.getElementById("shownew").addEventListener("click", (e) => {
  e.preventDefault();

  new_section.innerHTML += `   <div class="lowerlayer2">
  <input type="text" placeholder="Word Type" id="wtype${counter}" />
  <input type="text" placeholder="Synonym" id="syn${counter}" />
  <input type="text" placeholder="Antonyms" id="anty${counter}" />

  <textarea
    cols="30"
    rows="10"
    placeholder="History & Etymology"
    id="history${counter}"
  ></textarea>
  <textarea
    cols="30"
    rows="10"
    placeholder="Examples"
    id="example${counter}"
  ></textarea>
  <textarea
    cols="30"
    rows="10"
    placeholder="Definition 1"
    id="def1${counter}"
  ></textarea>
  </div>`;

  counter++;
});

Answer 1

//get the input elements
let input_one = document.getElementById('INPUT_ONE_ID');
let input_two = document.getElementById('INPUT_TWO_ID');
let input_three = document.getElementById('INPUT_THREE_ID');
let counter = 1;
let new_section = document.getElementsByClassName("addnew")[0];
document.getElementById("shownew").addEventListener("click", (e) => {
  e.preventDefault();
  // instead of creating new elements, append the old input elements
  new_section.innerHTML += `   <div class="lowerlayer2">`+input_one+input_two+input_three+`

  <textarea
    cols="30"
    rows="10"
    placeholder="History & Etymology"
    id="history${counter}"
  ></textarea>
  <textarea
    cols="30"
    rows="10"
    placeholder="Examples"
    id="example${counter}"
  ></textarea>
  <textarea
    cols="30"
    rows="10"
    placeholder="Definition 1"
    id="def1${counter}"
  ></textarea>
  </div>`;

  counter++;
});