how to render a javascript template in plain js

Question

I would like to add one Item if the button is clicked. I have the following template:

const Item = ({
  i
}) => `
        <div class="additional-guest mb-3">
            <hr>
            <div class="row">
                <div class="col-12 col-md">
                    <div class="form-group">

                            <label for="name_${i}" class="control-label">Name</label>
                            <input id="name_${i}" type="text" placeholder="Name" class="form-control" name="additional_guest[${i}][name]">

                    </div>
                </div>


                <div class="col-12 col-md">
                    <div class="form-group">

                            <label for="telephone_${i}" class="control-label">Telefonnummer</label>
                            <input id="telephone_${i}" type="text" placeholder="Telefonnummer" class="form-control" name="additional_guest[${i}][telephone]">

                    </div>
                </div>
            </div>
        </div>
`;


var e = document.getElementsByClassName('additional-guests');

document.getElementById('new-guest-button').addEventListener('click', function(ev) {
  console.log("klick");
  var r = document.getElementsByClassName('additional-guest').length;
  //e[0].innerHTML = [{ i: e.length}].map(Item).join(''); //works only once


  e[0].append([{
    i: r
  }].map(Item));


}, false);

<div class="additional-guests ml-3">
</div>

<div class="form-group">
  <button type="button" id="new-guest-button" class="btn btn-secondary btn-block">
            Weiterer Gast
        </button>
</div>

The <e[0].innerHTML>-Part works. But only once. I can add only one new Item because the further is overwritten. The append-Part is also not working. It writes the Item as text so it is not rendered. How can I add the template multiple times?

Answer 1

Use insertAdjacentHTML:

e[0].insertAdjacentHTML('beforeend', Item({i: r}));

const Item = ({
  i
}) => `
        <div class="additional-guest mb-3">
            <hr>
            <div class="row">
                <div class="col-12 col-md">
                    <div class="form-group">

                            <label for="name_${i}" class="control-label">Name</label>
                            <input id="name_${i}" type="text" placeholder="Name" class="form-control" name="additional_guest[${i}][name]">

                    </div>
                </div>


                <div class="col-12 col-md">
                    <div class="form-group">

                            <label for="telephone_${i}" class="control-label">Telefonnummer</label>
                            <input id="telephone_${i}" type="text" placeholder="Telefonnummer" class="form-control" name="additional_guest[${i}][telephone]">

                    </div>
                </div>
            </div>
        </div>
`;


var e = document.getElementsByClassName('additional-guests');

document.getElementById('new-guest-button').addEventListener('click', function(ev) {
  console.log("klick");
  var r = document.getElementsByClassName('additional-guest').length;
  console.log(r);
  e[0].insertAdjacentHTML('beforeend', Item({
    i: r
  })); // geht aber nur einmal



}, false);

<div class="additional-guests ml-3">
</div>

<div class="form-group">
  <button type="button" id="new-guest-button" class="btn btn-secondary btn-block">
        Weiterer Gast
      </button>
</div>

Answer 2

On every click I create new div, append the Item and then append the div into e[0].

const Item = i => `
        <div class="additional-guest mb-3">
            <hr>
            <div class="row">
                <div class="col-12 col-md">
                    <div class="form-group">

                            <label for="name_${i}" class="control-label">Name</label>
                            <input id="name_${i}" type="text" placeholder="Name" class="form-control" name="additional_guest[${i}][name]">

                    </div>
                </div>


                <div class="col-12 col-md">
                    <div class="form-group">

                            <label for="telephone_${i}" class="control-label">Telefonnummer</label>
                            <input id="telephone_${i}" type="text" placeholder="Telefonnummer" class="form-control" name="additional_guest[${i}][telephone]">

                    </div>
                </div>
            </div>
        </div>
`;


var e = document.getElementsByClassName('additional-guests');
var fieldsFlag = 0;

document.getElementById('new-guest-button').addEventListener('click', function(ev) {
  var div = document.createElement('div');
  var r = document.getElementsByClassName('additional-guest').length;
  div.innerHTML = Item(fieldsFlag)
  fieldsFlag++;

 e[0].append(div);

}, false);

    <div class="additional-guests ml-3">
            </div>
            
                <div class="form-group">
        <button type="button" id="new-guest-button" class="btn btn-secondary btn-block">
            Weiterer Gast
        </button>
    </div>