how to append input fields to a div without clearing the values with javascript

Question

I have this code that appends a div that contains input fields and textareas to a parent div on click of a button. when I append the div and input some values in the fields and then append a new div, the values of the input fields somehow becomes empty. how can it fix this problem?

here is the code:

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++;
});

innerHTML+=... re-sets the value with a new string so all the contents of the element get removed, the the new html string is parsed and new elements made. If you want to add elements without destroying/recreating previous content use insertAdjacentHTML() or insertAdjacentElement() — Patrick Evans
– Patrick Evans, Commented Mar 17, 2021 at 15:13
Using new_section.innerHTML you are not appending, but overwriting the content of this new_section. Try reading up on insertAdjacentHTML — KooiInc
– KooiInc, Commented Mar 17, 2021 at 15:15

mochaMame · Accepted Answer · 2021-07-21 00:03:18Z

1

innerHTML += overwrites the entire HTML instead of simply adding to it. Values are not included in the overwrite.

appendChild() will add to the div as expected if you don't mind it inserting an additional node. In your case you are adding a div anyways so its ok.

var newInfo = document.createElement('div'); // this makes a node, a node is require for appendChild. You could also use 'p' or 'span' etc.
newInfo.setAttribute("class", "lowerlayer2"); // you can add your classes and id etc with setAttribute
newInfo.innerHTML = "data to be added/appended";
document.getElementById("newtestdiv").appendChild(newInfo);

answered Jul 21, 2021 at 0:03

mochaMame

579 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KooiInc · Accepted Answer · 2021-03-17 15:41:57Z

0

Minimal example using insertAdjacentHTML:

let addedCounter = 1;
document.addEventListener("click", handle);

function handle(evt) {
  if (evt.target.id === "add") {
    return addStuff();
  }
}

function addStuff() {
  document.querySelector("#container")
    .insertAdjacentHTML("beforeend", `
      <p>
        <input type="text" placeholder="Word Type" id="wtype${addedCounter}" />
      </p>`);
    addedCounter += 1;
}

<div id="container">
  <button id="add">Add stuff</button>
</div>

answered Mar 17, 2021 at 15:41

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Comments

cs641311 · Accepted Answer · 2021-03-17 15:28:13Z

//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++;
});

Collectives™ on Stack Overflow

how to append input fields to a div without clearing the values with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related