Using template strings to append HTML

Question

Is there a way to append HTML using template literals in the DOM without overwriting what was currently posted?

I have a huge block of HTML that I need to post for a list that is being created, where a user is able to post their input.

Every time the task is submitted, it overwrites the current submission. I need it to append underneath.

This is the fiddle for demonstration purpose.

HTML:

<div class="main-content">
  <form class="new-items-create">
    <label>Name:</label>

    <input
      placeholder=" A Name"
      id="name"
    />

    <button class="subBtn">Submit</button>
  </form>
</div>

<span class="new-name"></span>

JavaScript:

form.addEventListener("submit", addItem);

function addItem(event) {
  event.preventDefault();

  let htmlStuff = `
         <div class="main">
        <div class="a name">
         <span>${name.value}</span>
        </div>
        <div>
        `;

  itemCreated.innerHTML = htmlStuff;
}

itemCreated.innerHTML += htmlStuff

Phil
– Phil

2019-06-17 02:19:22 +00:00
Commented Jun 17, 2019 at 2:19 — Phil
– Phil, Commented Jun 17, 2019 at 2:19

zer00ne · Accepted Answer · 2019-06-17 03:14:10Z

insertAdjacentHTML() adds htmlString in 4 positions see demo. Unlike .innerHTML it never rerenders and destroys the original HTML and references. The only thing .innerHTML does that insertAdjacentHTML() can't is to read HTML. Note: assignment by .innerHTML always destroys everything even when using += operator. See this post

const sec = document.querySelector('section');

sec.insertAdjacentHTML('beforebegin', `<div class='front-element'>Front of Element</div>`)

sec.insertAdjacentHTML('afterbegin', `<div class='before-content'>Before Content</div>`)

sec.insertAdjacentHTML('beforeend', `<div class='after-content'>After Content</div>`)

sec.insertAdjacentHTML('afterend', `<div class='behind-element'>Behind Element</div>`)

* {
  outline: 1px solid #000;
}

section {
  margin: 20px;
  font-size: 1.5rem;
  text-align: center;
}

div {
  outline-width: 3px;
  outline-style: dashed;
  height: 50px;
  font-size: 1rem;
  text-align: center;
}

.front-element {
  outline-color: gold;
}

.before-content {
  outline-color: blue;
}

.after-content {
  outline-color: green;
}

.behind-element {
  outline-color: red;
}

<section>CONTENT OF SECTION</section>

Robby Cornelissen · Accepted Answer · 2019-06-17 02:20:17Z

2

You can just use += to append:

document.getElementById('div').innerHTML += 'World';

<div id="div">
  Hello
</div>

answered Jun 17, 2019 at 2:20

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Comments

Nick Kuznia · Accepted Answer · 2022-12-27 09:05:22Z

0

Element.prototype.appendTemplate = function (html) {
    this.insertAdjacentHTML('beforeend', html);
    return this.lastChild;
};

If you create the element prototype as per above, you can get the element back as reference so you can continue modifying it:

   for (var sectionData of data) {
        var section = target.appendTemplate(`<div><h2>${sectionData.hdr}</h2></div>`);

        for (var query of sectionData.qs) {
            section.appendTemplate(`<div>${query.q}</div>`);
        }
    }

Depending on how much you're doing, maybe you'd be better off with a templating engine, but this could get you pretty far without the weight.

answered Dec 27, 2022 at 9:05

Nick Kuznia

1,77817 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using template strings to append HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related